API tools faq
paste
Advertisement
themesbygeorgia

Theme #33

themesbygeorgia
Aug 25th, 2014
860
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.52 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" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <!--Theme #33 by wonderfullythemes
  6.  
  7. dont remove the credit pls and thanks-->
  8.  
  9. <title>{Title}</title>
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12.  
  13. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  14. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  15.  
  16. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  17. <script src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  18. <stsss>
  19. <script>
  20. (function($){
  21. $(document).ready(function(){
  22. $("a[title]").style_my_tooltips({
  23. tip_follows_cursor:true,
  24. tip_delay_time:100,
  25. tip_fade_speed:200,
  26. attribute:"title"
  27. });
  28. });
  29. })(jQuery);
  30. </script>
  31.  
  32. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  33. <script>
  34. $(document).ready(function(){
  35. $(".message").click(function(){
  36. $(".entries").show();
  37. });
  38.  
  39. $(".message").click(function(){
  40. $(".sidebar").hide();
  41. });
  42. });
  43. </script>
  44.  
  45. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  46. <script>
  47. $(document).ready(function(){
  48. $(".index").click(function(){
  49. $(".entries").show();
  50. });
  51.  
  52. $(".index").click(function(){
  53. $(".sidebar").hide();
  54. });
  55.  
  56. $(".index").click(function(){
  57. $(".faq").hide();
  58. });
  59.  
  60. $(".index").click(function(){
  61. $(".tags").hide();
  62. })
  63.  
  64. $(".index").click(function(){
  65. $(".updateinfo").hide();
  66. })
  67.  
  68. });
  69. </script>
  70.  
  71. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  72. <script>
  73. $(document).ready(function(){
  74. $(".mail").click(function(){
  75. $(".faq").show();
  76. });
  77.  
  78. $(".mail").click(function(){
  79. $(".sidebar").hide();
  80. });
  81.  
  82. $(".mail").click(function(){
  83. $(".entries").hide();
  84. });
  85.  
  86. $(".mail").click(function(){
  87. $(".tags").hide();
  88. });
  89.  
  90. $(".mail").click(function(){
  91. $(".updateinfo").hide();
  92. });
  93. });
  94. </script>
  95.  
  96. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  97. <script>
  98. $(document).ready(function(){
  99. $(".map").click(function(){
  100. $(".tags").show();
  101. });
  102.  
  103. $(".map").click(function(){
  104. $(".sidebar").hide();
  105. });
  106.  
  107. $(".map").click(function(){
  108. $(".entries").hide();
  109. });
  110.  
  111. $(".map").click(function(){
  112. $(".faq").hide();
  113. });
  114.  
  115. $(".map").click(function(){
  116. $(".updateinfo").hide();
  117. });
  118. });
  119. </script>
  120.  
  121. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  122. <script>
  123. $(document).ready(function(){
  124. $(".updates").click(function(){
  125. $(".updateinfo").show();
  126. });
  127.  
  128. $(".updates").click(function(){
  129. $(".sidebar").hide();
  130. });
  131.  
  132. $(".updates").click(function(){
  133. $(".entries").hide();
  134. });
  135.  
  136. $(".updates").click(function(){
  137. $(".faq").hide();
  138. });
  139.  
  140. $(".updates").click(function(){
  141. $(".tags").hide();
  142. });
  143. });
  144. </script>
  145.  
  146. <meta name="color:Background" content="#fff" />
  147. <meta name="color:Link" content="#1bcc5c" />
  148. <meta name="color:Hover" content="#444" />
  149. <meta name="color:Text" content="#444" />
  150. <meta name="color:Title" content="#ddd" />
  151. <meta name="color:NavLinks" content="#fff" />
  152. <meta name="color:NavLinks Border" content="#fff" />
  153. <meta name="color:NavLinks Hover" content="#fff" />
  154. <meta name="color:NavLinks Border Hover" content="#fff" />
  155. <meta name="color:Post Title" content="#fff" />
  156. <meta name="color:Post Border" content="#fff" />
  157. <meta name="color:Blockquote" content="#444" />
  158. <meta name="color:Asker Icon Border" content="#ddd" />
  159. <meta name="color:Ask Text" content="#fff" />
  160. <meta name="color:Ask Link" content="#ddd" />
  161. <meta name="color:Ask Link Hover" content="#ccc" />
  162. <meta name="color:Question Text" content="#444" />
  163. <meta name="color:Question Border" content="#ddd" />
  164. <meta name="color:Answer Text" content="#444" />
  165. <meta name="color:Answer Border" content="#ddd" />
  166. <meta name="color:Chat Underline" content="#fff" />
  167. <meta name="color:Quote Underline" content="#fff" />
  168. <meta name="color:Permalink Text" content="#fff" />
  169. <meta name="color:Permalink Links" content="#ddd" />
  170. <meta name="color:Permalink Links Background Hover" content="#000" />
  171. <meta name="color:Permalink Links Hover" content="#fff" />
  172. <meta name="color:Scrollbar" content="#444" />
  173. <meta name="color:Tooltip Background" content="#000" />
  174. <meta name="color:Tooltip Text" content="#fff" />
  175. <meta name="color:Tooltip Border" content="#fff" />
  176.  
  177. <meta name="image:Background" content="" />
  178.  
  179. <meta name="if:Effect1" content="0" />
  180. <meta name="if:Effect2" content="1" />
  181.  
  182. <meta name="text:Welcome Message" content="click for posts" />
  183. <meta name="text:FAQ" content="your faq here" />
  184. <meta name="text:Your URL" content="your url here" />
  185. <meta name="text:Updates" content="your updates here" />
  186. <meta name="text:Link1" content="/" />
  187. <meta name="text:Link1 Text" content="Link 1" />
  188. <meta name="text:Link2" content="/" />
  189. <meta name="text:Link2 Text" content="Link 2" />
  190. <meta name="text:Link3" content="/" />
  191. <meta name="text:Link3 Text" content="Link 3" />
  192. <meta name="text:Link4" content="/" />
  193. <meta name="text:Link4 Text" content="Link 4" />
  194. <meta name="text:Link5" content="/" />
  195. <meta name="text:Link5 Text" content="Link 5" />
  196. <meta name="text:Link6" content="/" />
  197. <meta name="text:Link6 Text" content="Link 6" />
  198. <meta name="text:Link7" content="/" />
  199. <meta name="text:Link7 Text" content="Link 7" />
  200. <meta name="text:Link8" content="/" />
  201. <meta name="text:Link8 Text" content="Link 8" />
  202. <meta name="text:Link9" content="/" />
  203. <meta name="text:Link9 Text" content="Link 9" />
  204. <meta name="text:Link10" content="/" />
  205. <meta name="text:Link10 Text" content="Link 10" />
  206. <meta name="text:Link11" content="/" />
  207. <meta name="text:Link11 Text" content="Link 11" />
  208. <meta name="text:Link12" content="/" />
  209. <meta name="text:Link12 Text" content="Link 12" />
  210. <meta name="text:Link13" content="/" />
  211. <meta name="text:Link13 Text" content="Link 13" />
  212. <meta name="text:Link14" content="/" />
  213. <meta name="text:Link14 Text" content="Link 14" />
  214. <meta name="text:Link15" content="/" />
  215. <meta name="text:Link15 Text" content="Link 15" />
  216. <meta name="text:Link16" content="/" />
  217. <meta name="text:Link16 Text" content="Link 16" />
  218.  
  219.  
  220. <style type="text/css">
  221.  
  222. ::-webkit-scrollbar-thumb {
  223. height:auto;
  224. background-color:{color:Scrollbar};
  225. }
  226.  
  227. ::-webkit-scrollbar {
  228. height:6px;
  229. width:8px;
  230. padding-right:2px;
  231. background-color:transparent;
  232. }
  233.  
  234. #s-m-t-tooltip {
  235. max-width:200px;
  236. font-family:'pt sans';
  237. font-size:9px;
  238. background-color:{color:Tooltip Background};
  239. color:{color:Tooltip Text};
  240. border:1px solid {color:Tooltip Border};
  241. line-height:9px;
  242. display:none;
  243. position:absolute;
  244. letter-spacing:1px;
  245. text-transform:uppercase;
  246. padding:5px;
  247. margin:15px 0px 0px 15px;
  248. z-index:99999999999999;
  249. }
  250.  
  251. body {
  252. background:{color:Background};
  253. background-image: url({image:Background});
  254. background-attachment: fixed;
  255. background-repeat:no-repeat;
  256. background-size:cover;
  257. color:{color:Text};
  258. font-family:'calibri';
  259. font-size:13px;
  260. text-decoration:none;
  261. text-transform:none;
  262. margin:auto;
  263. }
  264.  
  265. a {
  266. color:{color:Link};
  267. text-decoration:underline;
  268. -moz-transition-duration:0.7s;
  269. -webkit-transition-duration:0.7s;
  270. -o-transition-duration:0.7s;
  271. }
  272.  
  273. a:hover {
  274. text-decoration:none;
  275. background-color:#fff;
  276. color:{color:Hover};
  277. -moz-transition-duration:0.7s;
  278. -webkit-transition-duration:0.7s;
  279. -o-transition-duration:0.7s;
  280. }
  281.  
  282. h2 {
  283. text-align:center;
  284. text-decoration:underline;
  285. color:{color:Post Title};
  286. }
  287.  
  288. h2 a {
  289. color:{color:Link};
  290. }
  291.  
  292. li {
  293. list-style:square;
  294. }
  295.  
  296. blockquote {
  297. border-left:2px solid {color:Blockquote};
  298. padding-left:5px;
  299. }
  300.  
  301. img, blockquote, li, h2 {
  302. max-width:100%;
  303. }
  304.  
  305. #container {
  306. margin:auto;
  307. top:0;
  308. left:0;
  309. right:0;
  310. bottom:0;
  311. position:fixed;
  312. width:650px;
  313. height:350px;
  314. border:1px solid {color:Container Border};
  315. overflow-y:scroll;
  316. overflow-x:hidden;
  317. }
  318.  
  319. /*--SIDEBAR--*/
  320.  
  321.  
  322.  
  323. .sidebar {
  324.  
  325. }
  326.  
  327. .message {
  328. float:center;
  329. text-align:center;
  330. margin-top:10px;
  331. letter-spacing:2px;
  332. font-size:10px;
  333. text-transform:uppercase;
  334. width:100%;
  335. padding:7px;
  336. border:1px solid white;
  337. -moz-transition-duration:0.7s;
  338. -webkit-transition-duration:0.7s;
  339. -o-transition-duration:0.7s;
  340. }
  341.  
  342. .message:hover {
  343. cursor:help;
  344. box-shadow:inset 130px 0 0 #fff;
  345. color:{color:Hover};
  346. -moz-transition-duration:0.7s;
  347. -webkit-transition-duration:0.7s;
  348. -o-transition-duration:0.7s;
  349. }
  350.  
  351. /*--LINKS--*/
  352. .links {
  353. height:30px;
  354. line-height:50px;
  355. font-size:10px;
  356. text-transform:uppercase;
  357. position:absolute;
  358. top:30%;
  359. right:240px;
  360. }
  361.  
  362. .links a {
  363. text-decoration:none;
  364. padding:10px;
  365. letter-spacing:1px;
  366. color:{color:NavLinks};
  367. border:1px solid {color:NavLinks Border};
  368. -moz-transition-duration:0.7s;
  369. -webkit-transition-duration:0.7s;
  370. -o-transition-duration:0.7s;
  371. }
  372.  
  373. .links a:hover {
  374. color:{color:Hover};
  375. box-shadow:inset 90px 0 0 #fff;
  376. -moz-transition-duration:0.7s;
  377. -webkit-transition-duration:0.7s;
  378. -o-transition-duration:0.7s;
  379. }
  380.  
  381. /*--PAGINATION--*/
  382.  
  383. #pagination {
  384. font-size:10px;
  385. text-transform:uppercase;
  386. text-align:center;
  387. line-height:10px;
  388. z-index:300;
  389. width:100%;
  390. float:center;
  391. bottom:70px;
  392. position:absolute;
  393. }
  394.  
  395. #pagination a {
  396. text-decoration:none;
  397. padding:5px 7px 5px 7px;
  398. color:{color:Link};
  399. border:1px solid {color:Link};
  400. }
  401.  
  402. #pagination a:hover {
  403. box-shadow:inset 0 30px 0 #fff;
  404. color:{color:Hover};
  405. }
  406.  
  407. .current_page {
  408. padding:5px 7px 5px 7px;
  409. }
  410.  
  411. .jump_page {
  412. color:blue;
  413. padding:5px 7px 5px 7px;
  414. }
  415.  
  416. .entries {
  417. width:300px;
  418. height:auto;
  419. position:relative;
  420. float:left;
  421. padding-right:5px;
  422. display:none;
  423. }
  424.  
  425. .post {
  426. margin-left:120px;
  427. width:250px;
  428. padding:50px;
  429. border-bottom:1px solid {color:Post Border};
  430. margin-bottom:10px;
  431. }
  432.  
  433. .post img{;
  434. max-width:100%;}
  435.  
  436. /*--POST TYPES--*/
  437. #askericon {
  438. width:100%x;
  439. text-align:center;
  440. }
  441.  
  442. #askericon img {
  443. padding:10px;
  444. border:1px solid {color:Asker Icon Border};
  445. margin-bottom:10px;
  446. }
  447.  
  448. .user {
  449. width:auto;
  450. padding:5px;
  451. color:{color:Ask Text};
  452. }
  453.  
  454. .user a {
  455. color:{color:Ask Link};
  456. }
  457.  
  458. .user a:hover {
  459. color:{color:Ask Link Hover};
  460. letter-spacing:2px;
  461. text-decoration:none;
  462. }
  463.  
  464. .question {
  465. color:{color:Question Text};
  466. border-top:1px solid {color:Question Border};
  467. padding-top:10px;
  468. margin-top:10px;
  469. padding-bottom:5px;
  470. position:relative;
  471. text-align:center;
  472. }
  473.  
  474. .answer {
  475. text-align:center;
  476. color:{color:Answer Text};
  477. border-top:1px solid {color:Answer Border};
  478. margin-top:10px;
  479. max-width:250px;
  480. }
  481.  
  482. .quote {
  483. font-size:18px;
  484. font-style:italic;
  485. border-bottom:2px dotted {color:Quote Underline};
  486. }
  487.  
  488. .chat li {
  489. list-style:none;
  490. }
  491.  
  492. .label {
  493. border-bottom:1px dotted {color:Chat Underline};
  494. }
  495.  
  496. .line_odd {
  497. line-height:20px;
  498. background-color:transparent;
  499. }
  500.  
  501. .line_even {
  502. line-height:20px;
  503. background-color:transparent;
  504. }
  505.  
  506. .playerbuttonbg {
  507. position: absolute;
  508. left: 20px;
  509. top: 20px;
  510. width: 19px;
  511. height: 19px;
  512. background-color: #fff;
  513. padding: 10px;
  514. opacity: .4;
  515. filter: alpha(opacity=40);
  516. -moz-opacity: 0.4;
  517. -khtml-opacity: 0.4;
  518. transition: opacity .7s ease-in-out;
  519. -moz-transition: opacity .7s ease-in-out;
  520. -webkit-transition: opacity .7s ease-in-out;
  521. }
  522.  
  523. .playerbuttonbg:hover {
  524. opacity: 1;
  525. filter: alpha(opacity=100);
  526. -moz-opacity: 1;
  527. -khtml-opacity: 1;
  528. }
  529.  
  530. .newplayerbutton {
  531. position: relative;
  532. width: 19px;
  533. height: 19px;
  534. overflow: hidden;
  535. }
  536.  
  537. .playerbuttonhug {
  538. position: absolute;
  539. top: -18px;
  540. left: -7px;
  541. }
  542.  
  543. .tumblr_audio_player {
  544. height: 90px;
  545. width: 270px;
  546. -moz-transform: scale(0.60, 0.60);
  547. -webkit-transform: scale(0.60, 0.60);
  548. -o-transform: scale(0.60, 0.60);
  549. -ms-transform: scale(0.60, 0.60);
  550. transform: scale(0.60, 0.60);
  551. -moz-transform-origin: top left;
  552. -webkit-transform-origin: top left;
  553. -o-transform-origin: top left;
  554. -ms-transform-origin: top left;
  555. transform-origin: top left;
  556. }
  557.  
  558. .audioimgwrapper {
  559. position: absolute;
  560. left: 0px;
  561. top: 0px;
  562. overflow: hidden;
  563. width: 79px;
  564. height: 79px;
  565. }
  566.  
  567. .audioimgwrapper img {
  568. width: 100%;
  569. height: auto;
  570. }
  571.  
  572. .trackdetails {
  573. width: auto;
  574. display:inline-block;
  575. margin-left: 90px;
  576. min-height: 85px;
  577. }
  578.  
  579. .audiowrapper {
  580. position: relative;
  581. display:inline-block;
  582. }
  583.  
  584. /*--LIKE/REBLOG BUTTONS--*/
  585. .like_and_reblog_buttons {
  586. padding-right:10px;
  587. border-right:1px solid white;
  588. margin-left:-70px;
  589. z-index:1000;
  590. position:absolute;
  591. list-style: none;
  592. -moz-transition-duration:0.7s;
  593. -webkit-transition-duration:0.7s;
  594. -o-transition-duration:0.7s;
  595. }
  596.  
  597. .like_and_reblog_buttons li {
  598. margin-bottom:5px;
  599. list-style:none;
  600. height:20px;
  601. width:20px;
  602. -moz-transition-duration:0.7s;
  603. -webkit-transition-duration:0.7s;
  604. -o-transition-duration:0.7s;
  605. }
  606.  
  607. /*--CREDIT--*/
  608. #spectrum {
  609. bottom:9px;
  610. right:7px;
  611. font-size:8px;
  612. font-family:'calibri';
  613. letter-spacing:1px;
  614. text-transform:uppercase;
  615. position:fixed;
  616. }
  617.  
  618. /*--PERMALINK--*/
  619. #footer {
  620. margin-left:280px;
  621. position:absolute;
  622. line-height:20px;
  623. width:140px;
  624. max-height:310px;
  625. padding:5px;
  626. color:{color:Permalink Text};
  627. overflow-y:scroll;
  628. border-left:1px solid white;
  629. padding-left:10px;
  630. }
  631.  
  632. #footer a {
  633. padding:3px;
  634. text-decoration:none;
  635. color:{color:Permalink Links};
  636. }
  637.  
  638. #footer a:hover {
  639. color:{color:Hover};
  640. }
  641.  
  642. .index {
  643. width:150px;
  644. }
  645.  
  646. .index:hover {
  647. cursor:help;
  648. }
  649.  
  650. .mail:hover {
  651. cursor:help;
  652. }
  653.  
  654. .faq {
  655. position:absolute;
  656. padding:50px;
  657. width:545px;
  658. max-height:350px;
  659. overflow-y:scroll;
  660. display:none;
  661. }
  662.  
  663. .faqinfo {
  664. padding-top:50px;
  665. position:absolute;
  666. width:250px;
  667. height:300px;
  668. right:50px;
  669. top:0;
  670. overflow-y:scroll;
  671. line-height:20px;
  672. }
  673.  
  674. .faqinfo li {
  675. list-style:decimal;
  676. }
  677.  
  678. .map:hover {
  679. cursor:help;
  680. }
  681.  
  682. .tags {
  683. position:absolute;
  684. margin-left:25px;
  685. padding-top:80px;
  686. padding-left:50px;
  687. padding-bottom:50px;
  688. width:545px;
  689. height:200px;
  690. display:none;
  691. }
  692.  
  693. #tagscontainer {
  694. display:table;
  695. width:100%;
  696. float:center;
  697. }
  698.  
  699. #singletag {
  700. display:table-cell;
  701. height:100px;
  702. width:100%;
  703. padding:0;
  704. margin:0;
  705. }
  706.  
  707. #singletag a {
  708. font-size:10px;
  709. text-transform:uppercase;
  710. line-height:10px;
  711. height:10px;
  712. width:70px;
  713. padding:10px;
  714. display:inline-block;
  715. margin-right:40px;
  716. margin-bottom:20px;
  717. border:1px solid {color:NavLinks Border};
  718. text-decoration:none;
  719. text-align:center;
  720. color:{color:NavLinks};
  721. -moz-transition-duration:0.7s;
  722. -webkit-transition-duration:0.7s;
  723. -o-transition-duration:0.7s;
  724. }
  725.  
  726. #singletag a:hover {
  727. color:{color:NavLinks Hover};
  728. border:1px solid {color:NavLinks Border Hover};
  729. -moz-transition-duration:0.7s;
  730. -webkit-transition-duration:0.7s;
  731. -o-transition-duration:0.7s;
  732. }
  733.  
  734. .updates:hover {
  735. cursor:help;
  736. }
  737.  
  738. .updateinfo {
  739. position:absolute;
  740. padding:50px;
  741. width:545px;
  742. max-height:350px;
  743. overflow-y:scroll;
  744. display:none;
  745. }
  746.  
  747. figure.effect-romeo {
  748. width:570px;
  749. height:322px;
  750. perspective:1000px;
  751. -webkit-perspective: 1000px;
  752. -moz-transition-duration:0.7s;
  753. -webkit-transition-duration:0.7s;
  754. -o-transition-duration:0.7s;
  755. }
  756.  
  757. figure.effect-romeo figcaption::before,
  758. figure.effect-romeo figcaption::after {
  759. position: absolute;
  760. top: 50%;
  761. left: 50%;
  762. width: 250px;
  763. height: 1px;
  764. background: #fff;
  765. content: '';
  766. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  767. transition: opacity 0.35s, transform 0.35s;
  768. -webkit-transform: translate3d(-50%,-50%,0);
  769. transform: translate3d(-50%,-50%,0);
  770. -moz-transition-duration:0.7s;
  771. -webkit-transition-duration:0.7s;
  772. -o-transition-duration:0.7s;
  773. }
  774.  
  775. figure.effect-romeo:hover figcaption::before {
  776. opacity: 0.5;
  777. -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
  778. transform: translate3d(-50%,-50%,0) rotate(45deg);
  779. -moz-transition-duration:0.7s;
  780. -webkit-transition-duration:0.7s;
  781. -o-transition-duration:0.7s;
  782. }
  783.  
  784. figure.effect-romeo:hover figcaption::after {
  785. opacity: 0.5;
  786. -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
  787. transform: translate3d(-50%,-50%,0) rotate(-45deg);
  788. -moz-transition-duration:0.7s;
  789. -webkit-transition-duration:0.7s;
  790. -o-transition-duration:0.7s;
  791. }
  792.  
  793. figure.effect-romeo h2,
  794. figure.effect-romeo p {
  795. position: absolute;
  796. top: 50%;
  797. left: 0;
  798. width: 100%;
  799. -webkit-transition: -webkit-transform 0.35s;
  800. transition: transform 0.35s;
  801. -moz-transition-duration:0.7s;
  802. -webkit-transition-duration:0.7s;
  803. -o-transition-duration:0.7s;
  804. }
  805.  
  806. figure.effect-romeo h2 {
  807. font-family:'calibri';
  808. text-transform:uppercase;
  809. text-decoration:none;
  810. letter-spacing:0.5em;
  811. -webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
  812. transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
  813. -moz-transition-duration:0.7s;
  814. -webkit-transition-duration:0.7s;
  815. -o-transition-duration:0.7s;
  816. }
  817.  
  818. figure.effect-romeo p {
  819. text-align:center;
  820. font-size:15px;
  821. -webkit-opacity: 0;
  822. -webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
  823. transform: translate3d(0,-50%,0) translate3d(0,150%,0);
  824. -moz-transition-duration:0.7s;
  825. -webkit-transition-duration:0.7s;
  826. -o-transition-duration:0.7s;
  827. }
  828.  
  829. figure.effect-romeo:hover h2 {
  830. -webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
  831. transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
  832. -moz-transition-duration:0.7s;
  833. -webkit-transition-duration:0.7s;
  834. -o-transition-duration:0.7s;
  835. }
  836.  
  837. figure.effect-romeo:hover p {
  838. -webkit-opacity: 1;
  839. -webkit-transform: translate3d(0,-60%,0) translate3d(0,100%,0);
  840. transform: translate3d(0,-60%,0) translate3d(0,100%,0);
  841. -moz-transition-duration:0.7s;
  842. -webkit-transition-duration:0.7s;
  843. -o-transition-duration:0.7s;
  844. }
  845.  
  846.  
  847. /*---------------*/
  848. /***** Sarah *****/
  849. /*---------------*/
  850.  
  851. figure.effect-sarah {
  852. width:570px;
  853. height:190px;
  854. }
  855.  
  856. figure.effect-sarah figcaption {
  857. text-align: left;
  858. }
  859.  
  860. figure.effect-sarah h2 {
  861. margin-top:25%;
  862. position: relative;
  863. overflow: hidden;
  864. padding: 0.5em 0;
  865. font-family:'calibri';
  866. text-transform:uppercase;
  867. text-decoration:none;
  868. letter-spacing:0.5em;
  869. }
  870.  
  871. figure.effect-sarah h2::after {
  872. position: absolute;
  873. bottom: 0;
  874. left: 0;
  875. width: 100%;
  876. height: 3px;
  877. background: #fff;
  878. content: '';
  879. -webkit-transition: -webkit-transform 0.35s;
  880. transition: transform 0.35s;
  881. -webkit-transform: translate3d(-100%,0,0);
  882. transform: translate3d(-100%,0,0);
  883. }
  884.  
  885. figure.effect-sarah:hover h2::after {
  886. -webkit-transform: translate3d(0,0,0);
  887. transform: translate3d(0,0,0);
  888. }
  889.  
  890. figure.effect-sarah p {
  891. padding: 1em 0;
  892. opacity: 0;
  893. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  894. transition: opacity 0.35s, transform 0.35s;
  895. -webkit-transform: translate3d(100%,0,0);
  896. transform: translate3d(100%,0,0);
  897. }
  898.  
  899. figure.effect-sarah:hover p {
  900. opacity: 1;
  901. -webkit-transform: translate3d(0,0,0);
  902. transform: translate3d(0,0,0);
  903. }
  904.  
  905. figure.effect-sarah .message {
  906. opacity:0;
  907. }
  908.  
  909. figure.effect-sarah:hover .message {
  910. opacity:1;
  911. }
  912.  
  913. {CustomCSS}</style></head><body>
  914.  
  915. <div class="links">
  916. <a class="index">Index</a><br>
  917. <a class="mail">Message</a><br>
  918. <a class="map">Links</a><br>
  919. <a class="updates">Updates</a><br>
  920. <a href="/archive">Archive</a>
  921. </div>
  922.  
  923. <div id="container">
  924.  
  925. <div class="faq">
  926.  
  927. <iframe frameborder="0" height="250" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/{text:Your URL}.tumblr.com" width="250"></iframe>
  928.  
  929. <div class="faqinfo">
  930.  
  931. {text:FAQ}
  932.  
  933. </div>
  934.  
  935. </div>
  936.  
  937. <div class="tags">
  938.  
  939. <div id="tagscontainer">
  940.  
  941. <div id="singletag">
  942.  
  943. <a href="{text:Link1}">{text:Link1 Text}</a>
  944. <a href="{text:Link2}">{text:Link2 Text}</a>
  945. <a href="{text:Link3}">{text:Link3 Text}</a>
  946. <a href="{text:Link4}">{text:Link4 Text}</a>
  947. <a href="{text:Link5}">{text:Link5 Text}</a>
  948. <a href="{text:Link6}">{text:Link6 Text}</a>
  949. <a href="{text:Link7}">{text:Link7 Text}</a>
  950. <a href="{text:Link8}">{text:Link8 Text}</a>
  951. <a href="{text:Link9}">{text:Link9 Text}</a>
  952. <a href="{text:Link10}">{text:Link10 Text}</a>
  953. <a href="{text:Link11}">{text:Link11 Text}</a>
  954. <a href="{text:Link12}">{text:Link12 Text}</a>
  955. <a href="{text:Link13}">{text:Link13 Text}</a>
  956. <a href="{text:Link14}">{text:Link14 Text}</a>
  957. <a href="{text:Link15}">{text:Link15 Text}</a>
  958. <a href="{text:Link16}">{text:Link16 Text}</a>
  959.  
  960. </div>
  961.  
  962. </div>
  963.  
  964. </div>
  965.  
  966. <div class="updateinfo">
  967.  
  968. {text:Updates}
  969.  
  970.  
  971. </div>
  972.  
  973. <div class="sidebar">
  974. {block:IfEffect1}
  975. <figure class="effect-romeo">
  976. <figcaption>
  977. <h2>{Title}</h2>
  978.  
  979. <p>{Description}
  980.  
  981. <br><br>
  982. <span class="message">{text:Welcome Message}</span>
  983.  
  984. </p>
  985.  
  986. </figcaption>
  987.  
  988. </figure>
  989. {/block:IfEffect1}
  990.  
  991. {block:IfEffect2}
  992. <figure class="effect-sarah">
  993. <figcaption>
  994. <h2>{Title}</h2>
  995.  
  996. <p>{Description}
  997.  
  998. <br><br>
  999.  
  1000. <center><span class="message">{text:Welcome Message}</span></center>
  1001.  
  1002. </p>
  1003.  
  1004. </figcaption>
  1005.  
  1006. </figure>
  1007. {/block:IfEffect2}
  1008.  
  1009.  
  1010. </div>
  1011.  
  1012.  
  1013. <div class="entries">{block:Posts}
  1014.  
  1015. <div class="post">
  1016.  
  1017. <div class="like_and_reblog_buttons">
  1018. <li>{ReblogButton color="white"}</li>
  1019. <li>{LikeButton color="white"}</li>
  1020. </div>
  1021.  
  1022. <div id="footer">
  1023. {block:Date}<a href="{Permalink}">{Month} {DayOfMonthWithSuffix} {Year}</a>
  1024. {block:NoteCount}<br><a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  1025. {block:RebloggedFrom}<br><a href="{ReblogParentURL}" title="{ReblogParentName}">Via</a>{/block:RebloggedFrom}
  1026. {block:RebloggedFrom} | <a href="{ReblogRootURL}" title="{ReblogRootName}">Source</a>{/block:RebloggedFrom}
  1027. {block:HasTags}<br>{block:Tags}#<a href="{TagURL}">{Tag}</a><br>{/block:Tags}{/block:HasTags}
  1028. {/block:Date}
  1029. </div>
  1030.  
  1031. <div id="wowposts">
  1032.  
  1033. {block:Text}
  1034. {block:Title}<h2>{Title}</h2>{/block:Title}
  1035. {Body}
  1036. {/block:Text}
  1037.  
  1038. {block:Answer}
  1039.  
  1040. <div id="askericon"><img src="{AskerPortraitURL-48}"/></div>
  1041.  
  1042. <div class="user">{Asker} asked: </div>
  1043.  
  1044. <div class="question">{Question}</div>
  1045.  
  1046. <div class="answer">{Answer}</div>
  1047. {/block:Answer}
  1048.  
  1049. {block:Quote}
  1050. <span class="quote"><span style="color:{color:Link};font-style:none">“</span>{Quote}<span style="color:{color:Link};font-style:none">”</span></span>
  1051. {block:Source} -{Source}{/block:Source}
  1052. {/block:Quote}
  1053.  
  1054. {block:Link}
  1055. <h2><a href="{URL}">{Name}</a></h2>
  1056. {block:Description}{Description}{/block:Description}
  1057. {/block:Link}
  1058.  
  1059. {block:Chat}
  1060. {block:Title}{Title}{/block:Title}
  1061. {block:Lines}<span class="chat">
  1062. <li class="line_{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li></span>
  1063. {/block:Lines}
  1064. {/block:Chat}
  1065.  
  1066. {block:Photo}
  1067. {LinkOpenTag}<img src="{PhotoURL-250}" alt="{PhotoAlt}">{LinkCloseTag}
  1068. {block:Caption}{Caption}{/block:Caption}
  1069. {/block:Photo}
  1070.  
  1071. {block:Photoset}
  1072. {Photoset-250}
  1073. {block:Caption}{Caption}{/block:Caption}
  1074. {/block:Photoset}
  1075.  
  1076. {block:Audio}
  1077. {block:AudioPlayer}
  1078. <div class="audiowrapper">
  1079. {block:AlbumArt}
  1080. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  1081. {/block:AlbumArt}
  1082.  
  1083. <div class="playerbuttonbg">
  1084. <div class="newplayerbutton">
  1085. <div class="playerbuttonhug">
  1086.  
  1087. {AudioPlayerWhite}
  1088.  
  1089. </div>
  1090. </div>
  1091. </div>
  1092.  
  1093. <div class="trackdetails">
  1094.  
  1095. {block:TrackName}{TrackName}</a><br>{/block:TrackName}
  1096. {block:Artist}Artist: {Artist}<br>{/block:Artist}
  1097. {block:Album}Album: {Album}<br>{/block:Album}
  1098. {PlayCountWithLabel}
  1099.  
  1100. </div>
  1101. </div>
  1102. {/block:AudioPlayer}
  1103.  
  1104. {block:Caption}{Caption}{/block:Caption}
  1105. {/block:Audio}
  1106.  
  1107. {block:Video}
  1108. {Video-250}
  1109. {block:Caption}{Caption}{/block:Caption}
  1110. {/block:Video}
  1111.  
  1112.  
  1113. </div>
  1114.  
  1115.  
  1116. </div>
  1117.  
  1118. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1119. {/block:Posts}
  1120.  
  1121. </div>
  1122.  
  1123. </div>
  1124.  
  1125. <div id="pagination">
  1126.  
  1127. {block:Pagination}{block:PreviousPage}
  1128. <a href="{PreviousPage}">back</a>
  1129. {/block:PreviousPage}{block:JumpPagination length="5"}{block:CurrentPage}&nbsp;
  1130. <span class="current_page">{PageNumber}</span>
  1131. {/block:CurrentPage}{block:JumpPage}
  1132. <a class="jump_page" href="{URL}">{PageNumber}</a>&nbsp;
  1133. {/block:JumpPage}{/block:JumpPagination}{block:NextPage}
  1134. <a href="{NextPage}">Next</a>
  1135. {/block:NextPage}{/block:Pagination}
  1136.  
  1137. </div>
  1138.  
  1139. <div id="spectrum">
  1140. <a href="http://wonderfullythemes.tumblr.com" title="wonderfullythemes">theme</a>
  1141. </div>
  1142.  
  1143.  
  1144. </body>
  1145. </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!