API tools faq
paste
Advertisement
harreyeh

pages pack 2 - about

harreyeh
Sep 27th, 2014
5,169
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.45 KB | None | 0 0
raw download clone embed print report
  1. <title>{Title}</title>
  2.  
  3. <link rel="shortcut icon" href="{Favicon}">
  4. <!---
  5.  
  6. about page 02 by hardziam // themesbyzsu
  7.  
  8. --->
  9.  
  10.  
  11. <style type="text/css">
  12.  
  13.  
  14. #header{color:white; background:black;}
  15. .title{border-bottom:2px solid #ffaacc;}
  16. .title:after{background:#aaa;}
  17.  
  18. #post a{color:#aaa;}
  19. #post a:hover{color:#eee;}
  20. #post a:before{background:#ccc;}
  21. #post b{color:lightblue;}
  22. #post em{color:#ffaacc;}
  23.  
  24. /* sidebar */
  25. #box{background:#000;}
  26. #box a{color:white;}
  27.  
  28.  
  29.  
  30.  
  31. /* don't touch anything below unless you know what you're doing */
  32.  
  33. ::-webkit-scrollbar {background-color:black; border:2px solid #fff;height:5px; width:5px;}
  34. ::-webkit-scrollbar-thumb:vertical {background-color:black; border:1px solid #fff; height:40px;}
  35. ::-webkit-scrollbar-thumb:horizontal {background-color:black;border:1px solid #fff; height:8px!important}
  36.  
  37.  
  38.  
  39. body {
  40. background: #fff;
  41. margin:0;width:100%;height:100%;
  42. font:11px Corbel;
  43. padding: 0;
  44. position:absolute;
  45. }
  46.  
  47. a {
  48. text-decoration:none;
  49. outline:none;
  50. color:gray;
  51. -webkit-transition: all 0.5s ease-in-out;
  52. -moz-transition: all 0.5s ease-in-out;
  53. -o-transition: all 0.5s ease-in-out;
  54. }
  55.  
  56. a:hover {
  57. color:#eee;
  58. -webkit-transition: all 0.5s ease-in-out;
  59. -moz-transition: all 0.5s ease-in-out;
  60. -o-transition: all 0.5s ease-in-out;
  61. }
  62.  
  63. #header{
  64. width:100%;
  65. top:0;left:0;
  66. padding:20px;
  67. padding-left:40px;
  68. position:fixed;
  69. height:40px;
  70. z-index:1000;
  71. }
  72.  
  73. .title{
  74. font-size:20px;
  75. text-transform:uppercase;
  76. display:inline-block;
  77. padding:10px;
  78. padding-top:4px;
  79. letter-spacing:5px;
  80. }
  81.  
  82. .title:after{
  83. width:300px;
  84. content:'';
  85. position:fixed;
  86. margin-top:34px;
  87. margin-left:9px;
  88. height:2px;
  89. }
  90.  
  91. #entries{
  92. width:760px;
  93. margin-left:20px;
  94. margin-top:80px;
  95. }
  96.  
  97. #post h1{
  98. font:10px corbel;
  99. text-align:left;
  100. letter-spacing:3px;
  101. padding:10px 40px;
  102. font-weight:bold;
  103. text-transform:uppercase;
  104. }
  105.  
  106. #post h1:before{
  107. content:'';
  108. position:absolute;
  109. width:30px;
  110. height:1px;
  111. margin-left:-35px;
  112. margin-top:6px;
  113. background:black;
  114. }
  115.  
  116. #post{
  117. width:440px;
  118. margin:20px;
  119. float:left;
  120. }
  121.  
  122. #post a{
  123. }
  124.  
  125. #post a:first-letter{
  126. text-transform:uppercase;
  127. }
  128. #post a:hover{
  129. -moz-transition-duration:1s;
  130. -webkit-transition-duration:1s;
  131. -o-transition-duration:1s;
  132. }
  133.  
  134. #post span{
  135. display:block;
  136. border-bottom:1px dotted #aaa;
  137. padding:10px;
  138. text-transform:uppercase;
  139. font-size:9px;
  140. letter-spacing:1px;
  141. }
  142.  
  143. #box{
  144. width:110px;
  145. padding:20px;
  146. padding-top:70px;
  147. position:fixed;
  148. left:530px;
  149. top:0;
  150. z-index:9999;
  151. }
  152.  
  153. #box img{
  154. width:85px;
  155. padding:10px;
  156. padding-bottom:20px;
  157. }
  158.  
  159. #box span{
  160. font:9px Corbel;
  161. text-align:justify;
  162. margin-bottom:10px;
  163. }
  164.  
  165. #box a{
  166. display:block;
  167. font-size:10px;
  168. padding:6px;
  169. font-style:italic;
  170. color:#eee;
  171. text-align:center;
  172. }
  173.  
  174. #box:hover a{
  175. color:#999;
  176. }
  177.  
  178. #box a:hover{
  179. color:white;
  180. }
  181.  
  182. .hidden{display:none;}
  183. .unhidden{display:block;}
  184.  
  185. .search{
  186. height:26px;
  187. margin-left:-20px;
  188. width:150px;
  189. margin-bottom:-40px;
  190. overflow:hidden;
  191. background:#333;
  192. }
  193.  
  194. .search input{
  195. border:1px solid #333;
  196. background:#333;
  197. padding:2px;
  198. padding-left:5px;
  199. color:white;
  200. width:150px;
  201. padding-top:5px;
  202. font:10px Calibri;
  203. }
  204.  
  205.  
  206. #credit a{
  207. position:fixed;
  208. right:10px;
  209. bottom:10px;
  210. padding:6px;
  211. background:black;
  212. text-transform:uppercase;
  213. color:white;
  214. -moz-transition-duration:1s;
  215. -webkit-transition-duration:1s;
  216. -o-transition-duration:1s;
  217. }
  218.  
  219. #credit a:hover {
  220. background:white;
  221. color:black;
  222. -moz-transition-duration:0.5s;
  223. -webkit-transition-duration:0.5s;
  224. -o-transition-duration:0.5s;
  225. }
  226.  
  227.  
  228. </style>
  229.  
  230.  
  231. </head>
  232.  
  233. <body>
  234.  
  235.  
  236. <div id="header">
  237. <div class="title">about me</div>
  238. </div>
  239.  
  240. <div id="box">
  241.  
  242. <!--- here you can change the image! --->
  243. <img src="http://38.media.tumblr.com/1a4831c75e6038ede90b3a82491bf578/tumblr_mgl6kyl7Gt1qlt206o8_250.png">
  244. <!--- here you can change the image! --->
  245.  
  246. <a href="/">back to blog</a>
  247. <a href="/faq">message</a>
  248. <a href="/dashboard">dashboard</a>
  249.  
  250. <!----- remove all this below if you don't want a search box --->
  251. <a href="javascript:unhide('searchbx');">search</a>
  252. <div id="searchbx" class="hidden"><div class="search"><form method="get" action="/search"><input type="text" placeholder="Type and press enter..." value="" name="q"></input></form></div></div>
  253. <!----------------------------------------------------------------->
  254.  
  255.  
  256. </div>
  257.  
  258. <div id="entries">
  259. <div id="post">
  260.  
  261. <!------
  262. TRIPLE CHECK if you're having problems. go to
  263. http://theme-hunter.tumblr.com/basics01
  264. if you don't know how to add in a link. don't ask me how to do this you can google it or something it's very simple please i get this question every day!!!!!!!
  265.  
  266. ----->
  267.  
  268. <span><b>name:</b> zsuzsanna</span>
  269. <span><b>age:</b> eighteen</span>
  270. <span><b>location:</b> dubai</span>
  271.  
  272. <span> <b>pronouns:</b> she/her </span>
  273.  
  274.  
  275. <h1>about me</h1>
  276. Here you can write your life story. <a href="/">link</a>, <b>bold</b>, <em>italic</em>, <s>strike</s>. 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.
  277.  
  278. </div>
  279.  
  280. </div>
  281.  
  282.  
  283.  
  284.  
  285.  
  286.  
  287.  
  288.  
  289.  
  290.  
  291.  
  292.  
  293.  
  294.  
  295.  
  296.  
  297.  
  298.  
  299.  
  300.  
  301.  
  302.  
  303.  
  304.  
  305.  
  306.  
  307.  
  308.  
  309.  
  310.  
  311.  
  312.  
  313.  
  314.  
  315.  
  316.  
  317.  
  318.  
  319.  
  320.  
  321.  
  322.  
  323.  
  324.  
  325.  
  326.  
  327.  
  328.  
  329.  
  330.  
  331.  
  332.  
  333.  
  334.  
  335.  
  336.  
  337.  
  338.  
  339.  
  340.  
  341.  
  342.  
  343.  
  344.  
  345.  
  346.  
  347.  
  348.  
  349.  
  350.  
  351.  
  352. <!---- leave this here please!!!!1 ---->
  353. <div id="credit"><a href="http://hardziam.tumblr.com">HZ</a></div>
  354.  
  355.  
  356. </body>
  357.  
  358. <!------ S C R I P T S! ------>
  359.  
  360. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  361. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  362. <script type="text/javascript" src="http://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
  363.  
  364. <script type="text/javascript">
  365. $(window).load(function(){
  366. var $wall = $('#entries');
  367. $wall.imagesLoaded(function(){
  368. $wall.masonry({
  369. itemSelector: '#post',
  370. isAnimated : true
  371. });
  372. });
  373. $wall.infinitescroll({
  374. navSelector : "div#navigation",
  375. nextSelector : "div#navigation a#nextPage",
  376. itemSelector : '#post',
  377. loadingImg : "",
  378. loadingText : " ",
  379. donetext : " ",
  380. extraScrollPx : 0,
  381. bufferPx : 10000,
  382. debug : false,
  383. errorCallback: function() {
  384. $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
  385. }},
  386. function( newElements ) {
  387. var $newElems = $( newElements );
  388. $newElems.hide();
  389. $newElems.imagesLoaded(function(){
  390. $wall.masonry( 'appended', $newElems, {isAnimated: true, animationOptions: {duration: 250, easing: 'linear', queue: false}}, function(){$newElems.fadeIn('slow');} );
  391. });
  392. }); $('#entries').show(500);
  393. });
  394. </script>
  395.  
  396. <script language="JavaScript">
  397. function function1(){
  398. window.scrollTo(0,5);
  399. }
  400. function function2(){
  401. window.scroll(0,2);
  402. }
  403. </script>
  404. <!---- end masonry scripts -->
  405.  
  406. <script type="text/javascript">
  407. function unhide(searchbx) {
  408. var item = document.getElementById(searchbx);
  409. if (item) {
  410. item.className=(item.className=='hidden')?'unhidden':'hidden';
  411. }
  412. }
  413. </script>
  414.  
  415. </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!