API tools faq
paste
Advertisement
themesbygeorgia

Page 04 -- About

themesbygeorgia
Apr 29th, 2014
840
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.14 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. <!--- Page 04 - About by wonderfullythemes --->
  6.  
  7. <title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11.  
  12. <!--SCRIPT FOR TOOLTIPS-->
  13. <stsss>
  14. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  15. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  16. <script>
  17. (function($){
  18. $(document).ready(function(){
  19. $("a[title]").style_my_tooltips({
  20. tip_follows_cursor:true,
  21. tip_delay_time:0,
  22. tip_fade_speed:0,
  23. attribute:"title"
  24. });
  25. });
  26. })(jQuery);
  27. </script>
  28.  
  29. <!--SCRIPT FOR THE SLIDING DROPDOWN MENUS-->
  30. <script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  31. <script type="text/javascript">
  32. $(document).ready(function(){
  33. $(".links_body").hide();
  34. $(".links_head").click(function(){
  35. $(this).next(".links_body").slideToggle('average');
  36. }); }); </script>
  37. <style type="text/css">
  38. .links_list { margin:0px; padding:0px; width:100%;}
  39. .links_head { padding-top:5px; padding-bottom:5px; cursor:pointer; position:relative; margin-left:1px; margin-right:1px;margin-top:1px;margin-bottom:10px;text-align:center;font-size:12px;font-style:italic;letter-spacing:1px;padding:7px;background-color:#000;color:#fff;}
  40. .links_body { padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:30px;text-align:left;margin-top:-5px;display:none;}
  41. </style>
  42.  
  43. <style type="text/css">
  44.  
  45. /*--SCROLLBAR--*/
  46. ::-webkit-scrollbar-thumb {
  47. height:auto;
  48. background-color:#000; /*-- change the colour of the scrollbar here--*/
  49. }
  50.  
  51. ::-webkit-scrollbar {
  52. height:4px;
  53. width:4px;
  54. padding-right:2px;
  55. background-color:#fff; /*--change the colour of the scrollbar background here--*/
  56. }
  57.  
  58. /*--TOOLTIPS--*/
  59. #s-m-t-tooltip {
  60. max-width:200px;
  61. font-family:'pt sans';
  62. font-size:8px;
  63. background-color:#000; /*--change the background colour of the tooltips here--*/
  64. color:#fff; /*--change the font colour of the tooltips here--*/
  65. line-height:9px;
  66. display:none;
  67. position:absolute;
  68. letter-spacing:1px;
  69. text-transform:uppercase;
  70. padding:3px;
  71. margin:15px 0px 0px 15px;
  72. z-index:99999999999999;
  73. }
  74.  
  75. /*--basic font--*/
  76. body {
  77. background:#fff;
  78. margin:0px;
  79. color:#000; /*--change basic text colour--*/
  80. font-family:'calibri';
  81. font-size:11px;
  82. line-height:100%;
  83. font-style: none;
  84. }
  85.  
  86. blockquote {
  87. padding-left:5px;
  88. border-left:2px solid;
  89. }
  90.  
  91. /*--basic image--*/
  92. img {
  93. max-width:100%;
  94. }
  95.  
  96. /*--basic link setup--*/
  97. a:link, a:visited, a:active {
  98. color:#1bcc5c; /*--change the link colour here--*/
  99. text-decoration: none;
  100. font-weight: normal;
  101. -moz-transition-duration:0.7s;
  102. -webkit-transition-duration:0.7s;
  103. -o-transition-duration:0.7s;
  104. }
  105.  
  106. a:hover {
  107. color:#51e5ca; /*--change the link on hover colour here--*/
  108. text-decoration: none;
  109. font-weight: normal;
  110. -moz-transition-duration:0.7s;
  111. -webkit-transition-duration:0.7s;
  112. -o-transition-duration:0.7s;
  113. }
  114.  
  115. /*--MAIN BOX--*/
  116. #container {
  117. width:420px;
  118. padding:10px;
  119. margin-left:490px;
  120. margin-top:60px;
  121. height:470px;
  122. position:fixed;
  123. }
  124.  
  125. #text {
  126. width:380px;
  127. padding:10px;
  128. height:440px;
  129. overflow-y:scroll;
  130. margin-bottom:10px;
  131. }
  132.  
  133. /*--LEFT HAND CORNER IMAGE--*/
  134. #image {
  135. width:auto;
  136. height:auto;
  137. padding:10px;
  138. }
  139.  
  140. #image img {
  141. width:250px; /*--toggles the width of the image--*/
  142. height:300px; /*--toggles the height--*/
  143. }
  144.  
  145. /*--CODE FOR BASIC INFO (NAME/AGE/COUNTRY)--*/
  146. #container:hover #info {
  147. margin-left:260px;
  148. opacity:1;
  149. -moz-transition-duration:0.7s;
  150. -webkit-transition-duration:0.7s;
  151. -o-transition-duration:0.7s;
  152. }
  153.  
  154. #info {
  155. width:105px;
  156. height:280px;
  157. padding:10px;
  158. position:fixed;
  159. margin-top:-310px;
  160. margin-left:160px;
  161. line-height:30px;
  162. opacity:0;
  163. -moz-transition-duration:0.7s;
  164. -webkit-transition-duration:0.7s;
  165. -o-transition-duration:0.7s;
  166. }
  167.  
  168. /*--LINKS TO THE SIDE OF THE MAIN BOX--*/
  169. #otherlinks {
  170. height:370px;
  171. width:200px;
  172. position:fixed;
  173. text-align:right;
  174. padding-top:20px;
  175. padding-right:10px;
  176. margin-top:100px;
  177. margin-left:255px;
  178. border-right:4px solid #000;
  179. }
  180.  
  181. #otherlinks a {
  182. color:#1bcc5c; /*--change the colour of the side links here--*/
  183. line-height:45px;
  184. padding:5px;
  185. width:auto;
  186. text-transform:lowercase;
  187. letter-spacing:2px;
  188. -moz-transition-duration:0.7s;
  189. -webkit-transition-duration:0.7s;
  190. -o-transition-duration:0.7s;
  191. }
  192.  
  193. #otherlinks a:hover {
  194. background-color:#000; /*--change the background colour of the sidelinks on hover--*/
  195. color:#51e5ca; /*--change the colour of the sidelinks on hover--*/
  196. padding-left:30px;
  197. padding-top:5px;
  198. padding-right:5px;
  199. padding-bottom:5px;
  200. letter-spacing:5px;
  201. -moz-transition-duration:0.7s;
  202. -webkit-transition-duration:0.7s;
  203. -o-transition-duration:0.7s;
  204. }
  205.  
  206. /*--TITLE AND MAIN LINKS BELOW THE BOX--*/
  207. #sidebar {
  208. width:380px;
  209. height:50px;
  210. position:fixed;
  211. margin-left:500px;
  212. margin-top:560px;
  213. padding:10px;
  214. z-index:2;
  215. background-color:#fff;
  216. }
  217.  
  218. #title2 {
  219. color:#000; /*--change the title colour here--*/
  220. font-style:italic; /*--can be changed to "none"--*/
  221. font-weight:none; /*-- can be changed to "bold"--*/
  222. letter-spacing:1px;
  223. text-align:left; /*--can be changed to "right" "center" or "justify"--*/
  224. font-size:15px; /*--controls the size--*/
  225. height:20px;
  226. margin-top:-10px;
  227. margin-left:-10px;
  228. background-color:#fff; /*--change the background colour of the title here--*/
  229. padding-top:30px;
  230. padding-right:20px;
  231. padding-bottom:20px;
  232. padding-left:20px;
  233. width:140px;
  234. z-index:3;
  235. }
  236.  
  237. #links {
  238. width:160px;
  239. height:20px;
  240. margin-left:170px;
  241. margin-top:-70px;
  242. position:fixed;
  243. background-color:#fff;
  244. border-left:2px solid #1bcc5c; /*-- change the border width and colour here. "solid" can be changed to "dashed" "double" or "dotted"--*/
  245. padding-top:30px;
  246. padding-right:20px;
  247. padding-left:40px;
  248. padding-bottom:20px;
  249. z-index:6;
  250. }
  251.  
  252. #links a {
  253. width:100px;
  254. overflow:hidden;
  255. color:#1bcc5c; /*--change the colour of the main links here--*/
  256. margin-right:10px;
  257. text-align:left; /*-- can be changed to "center" "right" or "justify"--*/
  258. border-bottom:2px solid transparent; /*-- the "transparent" hides the underline here but shows it on hover--*/
  259. -moz-transition-duration:0.7s;
  260. -webkit-transition-duration:0.7s;
  261. -o-transition-duration:0.7s;
  262. }
  263.  
  264. #links a:hover {
  265. color:#51e5ca; /*--change the colour of the main links on hover here--*/
  266. border-bottom:2px solid #000; /*-- change the width and colour of the underline here. "solid" can be changed to "dashed" "double" or "dotted". if you change the width here make sure to change it in the #links a tag--*/
  267. letter-spacing:2px;
  268. -moz-transition-duration:0.7s;
  269. -webkit-transition-duration:0.7s;
  270. -o-transition-duration:0.7s;
  271. }
  272.  
  273. /*--CREDIT DO NOT REMOVE OR CHANGE--*/
  274. #cred {
  275. position:fixed;
  276. font-family:'calibri';
  277. font-size:8px;
  278. right:9px;
  279. bottom:9px;
  280. padding:4px;
  281. letter-spacing:1px;
  282. }
  283.  
  284. </style></head><body>
  285.  
  286. <!--START OF MAIN BOX-->
  287. <div id="container">
  288.  
  289. <!--replace below url with your own-->
  290. <div id="image"><img src="http://31.media.tumblr.com/6ca7f4b2678ce568efcbd45718dc24be/tumblr_n22oe0x2s81sk9x8yo4_500.jpg"></div>
  291.  
  292. <div id="info">
  293.  
  294. <!--if you dont want to display your name/age/country then erase and enter your desired title. i suggest making it something than be answered with one line only otherwise the spacing will be a little uneven-->
  295.  
  296. <div style="background-color:#000;color:#fff;padding:3px;letter-spacing:4px;text-transform:uppercase;font-size:12px;font-style:italic;margin-left:-10px;margin-top:-10px;width:120px;">name</div><p>
  297.  
  298. enter name here<br><br>
  299.  
  300. <div style="background-color:#000;color:#fff;padding:3px;letter-spacing:4px;text-transform:uppercase;font-size:12px;font-style:italic;margin-left:-10px;margin-top:-20px;width:120px;">age</div><p>
  301.  
  302. enter age here<br><br>
  303.  
  304. <div style="background-color:#000;color:#fff;padding:3px;letter-spacing:4px;text-transform:uppercase;font-size:12px;font-style:italic;margin-left:-10px;margin-top:-20px;width:120px;">country</div><p>
  305.  
  306. enter country here<br>
  307. </div>
  308.  
  309. <div id="text">
  310.  
  311. <!-- the main/rlly long stuff about you goes here, can be shows/hobbies/ships whatever really. type inbetween the <blockquote></blockquote> tags, theres unlimited length-->
  312.  
  313. <div class="links_list">
  314. <p class="links_head">Title</p> <!-- type your desired title where my "Title" is-->
  315. <div class="links_body">
  316. <blockquote> <!--erase my examples and type what you want below this line and above </blockquote>-->
  317. <div style="background-color:#000; padding:2px; color:#fff; text-transform:uppercase;text-align:center;">titles</div>
  318. Normal text, <b>bold</b>, <u>underline</u>, <i>italic</i>, <s>strikethrough</s>.<br>
  319. new paragraph<p>
  320. page break
  321. </blockquote>
  322. </div></div>
  323.  
  324. <!--repeat the above instructions for the following boxes-->
  325. <div class="links_list">
  326. <p class="links_head">Title</p>
  327. <div class="links_body">
  328. <blockquote>write your text here!</blockquote>
  329. </div></div>
  330.  
  331. <div class="links_list">
  332. <p class="links_head">Title</p>
  333. <div class="links_body">
  334. <blockquote>write your text here!</blockquote>
  335. </div></div>
  336.  
  337. <div class="links_list">
  338. <p class="links_head">Title</p>
  339. <div class="links_body">
  340. <blockquote>write your text here!</blockquote>
  341. </div></div>
  342.  
  343. <!--NOTE: if you'd like more boxes then copy the following code:
  344.  
  345. <div class="links_list">
  346. <p class="links_head">Title</p>
  347. <div class="links_body">
  348. <blockquote>write your text here!</blockquote>
  349. </div></div>
  350.  
  351. below this note but above the </div> tag you see there-->
  352.  
  353.  
  354.  
  355. <!--eg. copy the code over this comment right here-->
  356.  
  357.  
  358. </div>
  359.  
  360. </div>
  361.  
  362. <div id="otherlinks">
  363.  
  364. <!--replace "URL HERE" with your desired URL and replace "link" with your desired title-->
  365. <a href="URL HERE">link</a><br>
  366. <a href="URL HERE">link</a><br>
  367. <a href="URL HERE">link</a><br>
  368. <a href="URL HERE">link</a><br>
  369. <a href="URL HERE">link</a><br>
  370. <a href="URL HERE">link</a><br>
  371. <a href="URL HERE">link</a>
  372. </div>
  373.  
  374. <div id="sidebar">
  375. <div id="title2">About</div> <!--change the title here-->
  376. <div id="links">
  377. <!-- change the following two links to whatever you'd like. if you really want a 3rd link here im ok with you replacing my credit HOWEVER YOU MUST KEEP THE ONE IN THE CORNER (that one will not get in the way of anything i promise you. ofc if you want to keep both thats cool too c:-->
  378. <a href="/">Home</a>
  379. <a href="/faq">FAQ</a>
  380. <a href="http://wonderfullythemes.tumblr.com">Credit</a>
  381. </div>
  382. </div>
  383.  
  384. <div id="cred">
  385. <a href="http://wonderfullythemes.tumblr.com/">THEME</a>
  386. </div>
  387.  
  388. </body></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!