API tools faq
paste
quiddittch

about page 01

quiddittch
Jul 1st, 2015
1,920
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <!------------------------------------------------------------------
  6.  
  7. ABOUT PAGE #1 BY JAEBIUM
  8.  
  9. -dont steal
  10. -dont remove credit
  11. -edit as much as you want
  12.  
  13. -------------------------------------------------------------------->
  14.  
  15. <title>About Me - {Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  19.  
  20. <!----jquery----->
  21.  
  22. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  23.  
  24. <!----google fonts---->
  25.  
  26. <link href='http://fonts.googleapis.com/css?family=Cousine:400,700' rel='stylesheet' type='text/css'>
  27.  
  28. <!---tooltip--->
  29.  
  30. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  31.  
  32. <script>
  33.  
  34. (function($){
  35.  
  36. $(document).ready(function(){
  37.  
  38. $("a[title]").style_my_tooltips({
  39.  
  40. tip_follows_cursor:true,
  41.  
  42. tip_delay_time:300,
  43.  
  44. tip_fade_speed:300,
  45.  
  46. attribute:"title"
  47.  
  48. });
  49.  
  50. });
  51.  
  52. })(jQuery);
  53.  
  54. </script>
  55.  
  56. <style type="text/css">
  57.  
  58. /*---scrollbar---*/
  59.  
  60. ::-webkit-scrollbar {
  61. height: 2px;
  62. width: 20px;
  63. background-color:transparent;
  64. }
  65.  
  66. ::-webkit-scrollbar-thumb {
  67. border:9px solid #fff;
  68. background-color:#e8e8e8;
  69. }
  70.  
  71. /*---selection---*/
  72.  
  73. ::selection {color: #9f9898; background: #f8f8f8;}
  74. ::-moz-selection {color: #9f9898; background: #f8f8f8;}
  75. ::-webkit-selection {color: #9f9898; background: #f8f8f8;}
  76.  
  77. /*---tooltip---*/
  78.  
  79. #s-m-t-tooltip{
  80. font-size:7px;
  81. position:absolute;
  82. margin-top:30px;
  83. margin-left:10px;
  84. z-index:9999999;
  85. background:#ffffff;
  86. font-family:'cousine', sans-serif;
  87. padding:4px 8px 4px 8px;
  88. text-transform:uppercase;
  89. letter-spacing:1px;
  90. }
  91.  
  92. /*---basics---*/
  93.  
  94. body {
  95. margin:0;
  96. color:#9f9898;
  97. font-family: trebuchet ms, arial;
  98. line-height:16px;
  99. font-size:10px;
  100. background:#f8f8f8;
  101. }
  102.  
  103. a {
  104. color:#a0a0a0;
  105. text-decoration:none;
  106. -webkit-transition:0.6s all;
  107. -moz-transition:0.6s all;
  108. -o-transition:0.6s all;
  109. transition:0.6s all;
  110. }
  111.  
  112. a:hover {
  113. cursor:help;
  114. color:#000000;
  115. -webkit-transition:0.6s all;
  116. -moz-transition:0.6s all;
  117. -o-transition:0.6s all;
  118. transition:0.6s all;
  119. }
  120.  
  121. pre {
  122. white-space: pre-wrap;
  123. white-space: -moz-pre-wrap;
  124. white-space: -pre-wrap;
  125. white-space: -o-pre-wrap;
  126. word-wrap: break-word;
  127. }
  128.  
  129. blockquote {
  130. border-left:2px solid #f0f0f0;
  131. padding: 0px 0px 0px 20px;
  132. margin-left:0px;
  133. max-width: 100%;
  134. }
  135.  
  136. ul {
  137. list-style-type:circle;
  138. }
  139.  
  140. /*---content---*/
  141.  
  142. #center {
  143. width:600px;
  144. height:500px;
  145. position:absolute;
  146. left:50%;
  147. top:50%;
  148. margin-left:-300px;
  149. margin-top:-270px;
  150. }
  151.  
  152. #border {
  153. border:1px solid #f0f0f0;
  154. }
  155.  
  156. #header {
  157. letter-spacing:1px;
  158. width:600px;
  159. font-family:courier, 'cousine', sans-serif;
  160. margin-left:-101px;
  161. text-align:left;
  162. font-size:15px;
  163. margin:0px auto;
  164. overflow:hidden;
  165. }
  166.  
  167. #header img {
  168. overflow:hidden;
  169. z-index:1;
  170. width:600px;
  171. height:100px;
  172. border-bottom:1px solid #f0f0f0;
  173. -webkit-transition: all .6s ease; /* Safari and Chrome */
  174. -moz-transition: all .6s ease; /* Firefox */
  175. -ms-transition: all .6s ease; /* IE 9 */
  176. -o-transition: all .6s ease; /* Opera */
  177. transition: all .6s ease;
  178. }
  179.  
  180. #border:hover #header img {
  181. -webkit-transform:scale(1.10);
  182. -moz-transform:scale(1.10);
  183. -ms-transform:scale(1.10);
  184. -o-transform:scale(1.10);
  185. transform:scale(1.10);
  186. }
  187.  
  188. #other {
  189. position:absolute;
  190. z-index:2;
  191. width:500px;
  192. padding:43px 50px 42px 50px;
  193. background-color:rgba(0,0,0, 0.3); /*u can change the background color (0,0,0) and opacity (0.3) of the header*/
  194. }
  195.  
  196. #titulo {
  197. text-align:center;
  198. font-weight:700;
  199. font-size:14px;
  200. letter-spacing:3px;
  201. text-transform:uppercase;
  202. color:#ffffff; /*color of title*/
  203. }
  204.  
  205. #content {
  206. padding:80px 100px;
  207. background:#ffffff;
  208. overflow-y:auto;
  209. text-align:justify;
  210. height:245px;
  211. width:400px;
  212. }
  213.  
  214. #content a {
  215. padding-bottom:1px;
  216. border-bottom:1px solid #f0f0f0;
  217. }
  218.  
  219. .links {
  220. text-align:center;
  221. font-weight:bold;
  222. font-size:8px;
  223. letter-spacing:1px;
  224. text-transform:uppercase;
  225. margin-top:20px;
  226. }
  227.  
  228. .links a {
  229. margin-right:20px;
  230. }
  231.  
  232. {CustomCSS}</style></head><body>
  233.  
  234. <div id="center">
  235. <div id="border">
  236.  
  237. <div id="header">
  238. <div id="other">
  239. <div id="titulo">About Me</div> <!---u can change the title name here---->
  240. </div>
  241. <img src="https://41.media.tumblr.com/ea534b825a880fa4eafbbaa95d4529cc/tumblr_nqtijxT71L1tc17foo5_r1_540.jpg"> <!---replace the link with whatever image you want--->
  242. </div>
  243.  
  244. <div id="content">
  245. <p><b>This is the content.</b> You can pour your heart out here; talk about yourself or something you're passionate about, whatever.</p>
  246.  
  247. <ul>
  248. <li>You can put bullets here! nice</li>
  249. <li><a href="http://www.w3schools.com/html/html_links.asp">This</a> is how to put in a link</li>
  250. <li>Use < b > and < /b > to <b>bold</b> text</li>
  251. <li>Use < strike > and < /strike > to <strike>strike through text</strike></li>
  252. </ul>
  253.  
  254. <p><b>Style this to your liking!</b> The rest of this is going to be dummy text so farewell for now. Aliquam feugiat vel nibh et posuere. Aliquam mauris ante, vulputate id egestas nec, fringilla nec felis. Pellentesque est risus, posuere lacinia odio ut, facilisis lobortis ex. Curabitur luctus nibh ut auctor bibendum. Etiam iaculis arcu.</p>
  255.  
  256. <blockquote>This is a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id metus id nibh vulputate ultricies.</blockquote>
  257.  
  258. </div>
  259. </div>
  260.  
  261. <div class="links">
  262. <a href="/">home</a>
  263. <a href="/ask">ask</a>
  264. <a href="http://www.tumblr.com">dashboard</a>
  265. <a href="http://www.jaebium.tumblr.com" title="jaebium" target="_blank">@</a> <!-----dont remove this link pls---->
  266. </div>
  267.  
  268. </div>
  269.  
  270. </body>
  271. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!