API tools faq
paste
7th-district

[Page #1] About Page

7th-district
Aug 30th, 2013
8,948
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.98 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
  3.  
  4. THEME MADE BY RACHEL @ ALMIGHTYONE,TUMBLR.COM
  5.  
  6. [PAGE #1]
  7. Go to 7th-district.tumblr.com if you have any questions.
  8. Do NOT remove the credits!!
  9.  
  10. Other than changing the colors and pictures do not make the page
  11. not longer recognizable as mine!
  12.  
  13. ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
  14. -->
  15. <html>
  16. <head>
  17.  
  18. <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
  19. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  20. <link rel="shortcut icon" href="{Favicon}" />
  21.  
  22. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  23. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  24.  
  25. <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic' rel='stylesheet' type='text/css'>
  26.  
  27. <style type="text/css">
  28.  
  29. ::selection {
  30. background: #000;
  31. color: #fff;
  32. }
  33.  
  34. ::-webkit-selection {
  35. background: #000;
  36. color: #fff;
  37. }
  38.  
  39.  
  40. body {
  41. background:#f9f9f9;
  42. font-family:calibri;
  43. font-size:11px;
  44. }
  45.  
  46. body a{text-decoration:none;}
  47.  
  48.  
  49. /* THE LINKS ON THE LEFT*/
  50.  
  51. #links {
  52. top:350px;
  53. left:50%;
  54. margin-left:-340px;
  55. position:fixed;
  56. width:50px;
  57. float:left;
  58. border:0px solid black;
  59. }
  60.  
  61. .links{
  62. width:10px;
  63. position:relative;
  64. float:left;
  65. text-align:center;
  66. margin:4px;
  67. font-family:calibri;
  68. text-transform:uppercase;
  69. color:#fff;
  70. background:#323232;
  71. padding:7px 10px 7px 10px;
  72. font-size:11px;
  73. border-left:3px solid #f3667d; /* THE BORDER LINK COLORS */
  74. border-right:3px solid #f3667d;
  75. box-shadow:0px 0px 3px #aaa;
  76. border-radius:100%;
  77. -webkit-transition: all 0.6s ease-in-out;
  78. transform:rotate(0deg);
  79. -ms-transform:rotate(70deg);
  80. -webkit-transform:rotate(0deg);
  81. }
  82.  
  83. .links:hover{
  84. color:#fff;
  85. background:#323232;
  86. border-left:3px solid #59c29f; /* THE BORDER LINK HOVER COLORS */
  87. border-right:3px solid #59c29f;
  88. transform:rotate(360deg);
  89. -ms-transform:rotate(7deg);
  90. -webkit-transform:rotate(360deg);
  91. -webkit-transition: all 0.6s ease-in-out;
  92. }
  93.  
  94.  
  95. /* THIS IS FOR THE INFORMATION ON THE RIGHT */
  96.  
  97. #right {
  98. background:#323232;
  99. border-left:5px solid #f3667d;
  100. width:120px;
  101. height:286px;
  102. position:absolute;
  103. top:0px;
  104. right:0px;
  105. margin-left:0px;
  106. }
  107.  
  108. .name {
  109. width:100px;
  110. float:right;
  111. font-family:calibri;
  112. font-size:13px;
  113. text-transform:uppercase;
  114. font-weight:none;
  115. color:#59c29f; /* <-- COLOR FOR THE QUESTION ON THE RIGHT*/
  116. line-height:110%;
  117. }
  118.  
  119. .answer {
  120. float:right;
  121. text-align:right;
  122. font-family:calibri;
  123. font-size:11px;
  124. font-weight:none;
  125. color:#fff; /* <--- COLOR FOR THE ANSWER ON THE RIGHT */
  126. }
  127.  
  128. .whole{
  129. float:right;
  130. text-align:right;
  131. padding:4px 11px;
  132. background:#323232; /* THE BACKGROUND FOR THE RIGHT QUESTIONS */
  133. margin-bottom:7px;
  134. border-left:2px solid #f3667d; /* THE LEFT PINK BORDER ON THE RIGHT */
  135. box-shadow:0px 0px 1px #323232;
  136. }
  137.  
  138. /* THE BIG BOX FULL OF YOUR INFORMATION */
  139.  
  140. #content {
  141. background:#fff;
  142. width:550px;
  143. height:267px;
  144. position:fixed;
  145. top:320px; /*290 */
  146. left:50%;
  147. margin-left:-290px;
  148. padding:10px;
  149. border:5px solid #323232; /* THE BORDER FOR THE WHOLE BOX FULL OF YOUR INFORMATION */
  150. z-index:3;
  151. box-shadow: 0 8px 10px -5px #323232;
  152. -webkit-box-shadow: 0 8px 10px -5px #323232;
  153. -moz-box-shadow: 0 8px 6px -6px black;
  154.  
  155. }
  156.  
  157. /* TITLE */
  158.  
  159. #title{
  160. top:250px;
  161. left:50%;
  162. margin-left:-290px;
  163. position:fixed;
  164. width:580px;
  165. text-align:right;
  166. font-family: 'Open Sans Condensed', sans-serif;
  167. text-transform:uppercase;
  168. color:#f3667d;
  169. font-size:55px;
  170. letter-spacing:3px;
  171. text-shadow:1px 3px 3px #ddd;
  172. }
  173.  
  174. /* YOUR INFORMATION ON THE LEFT */
  175.  
  176. #info {
  177. border:0px solid black;
  178. width:425px;
  179. float:left;
  180. line-height:120%;
  181. margin-top:0px;
  182. margin:left:0;
  183. color:black;
  184. font-family:calibri;
  185. text-align:left;
  186. font-size:11px;
  187. }
  188.  
  189. /* LINKS AND ITALICS */
  190.  
  191. #info a{
  192. color:#59c29f;
  193. -webkit-transition: all 0.6s ease-in-out;
  194. }
  195.  
  196. #info a:hover {
  197. color:#eee;
  198. -webkit-transition: all 0.6s ease-in-out;
  199. }
  200.  
  201. #info i {
  202. font-weight:bold;
  203. color:#369b91; /* <--- italics */
  204. }
  205.  
  206. .question {
  207. font-size:12px;
  208. font-weight:bold;
  209. text-transform:uppercase;
  210. color:#17125b;
  211. font-style:italic;
  212. }
  213.  
  214. /* DO NOT TOUCH BELOW */
  215.  
  216. ul {
  217. list-style-type:square;}
  218.  
  219. #s-m-t-tooltip {
  220. position:relative;
  221. overflow:hidden;
  222. z-index:990999999;
  223. max-width:200px;
  224. margin:10px 0 0 10px;
  225. padding:4px 5px 5px 5px;
  226. font:9px calibri;
  227. background:#323232;
  228. line-height:100%;
  229. font-weight:none;
  230. text-transform:uppercase;
  231. letter-spacing:1px;
  232. color:#fff;
  233. }
  234.  
  235. </style>
  236. </head>
  237. <body>
  238.  
  239. <div id="links">
  240. <a href="/" class="links" title="go back">i</a>
  241. <a href="/ask" class="links" title="message">ii</a>
  242. <a href="/archive" class="links" title="history">iii</a>
  243.  
  244. <!-- THIS IS WHERE YOU ADD YOUR CUSTOM LINKS -->
  245. <a href="/ask" class="links" title="link 1">iv</a>
  246. <a href="/archive" class="links" title="link 2">v</a>
  247.  
  248. <!-- PLEASE DO NOT RENAME THE CREDIT AND JUST LEAVE IT LIKE THAT! -->
  249. <a href="http://almightyone.tumblr.com/" class="links" title="page made by almightyone">©</a>
  250. </div>
  251.  
  252.  
  253. <div id="title">About me</div>
  254. <div id="content">
  255.  
  256. <div id="info">
  257.  
  258. <Div id="right">
  259.  
  260. <!-- YOU CAN REPLACE THE TITLE/QUESTIONS TO WHATEVER YOU WANT -->
  261. <div class="whole">
  262. <span class="name"> NAME:</span> <Br />
  263. <span class="answer"> Rachel</span>
  264. </div>
  265.  
  266. <div class="whole">
  267. <span class="name">age:</span> <Br />
  268. <span class="answer">16 years old</span>
  269. </div>
  270.  
  271. <div class="whole">
  272. <span class="name">location:</span> <br />
  273. <span class="answer">Japan</span>
  274. </div>
  275.  
  276. <div class="whole">
  277. <span class="name">gender:</span> <Br />
  278. <span class="answer">Female</span>
  279. </div>
  280.  
  281. <div class="whole">
  282. <span class="name">sexuality:</span> <Br />
  283. <span class="answer">Straight</span>
  284. </div>
  285.  
  286. <div class="whole">
  287. <span class="name">occupation:</span> <Br />
  288. <span class="answer">Fairy</span>
  289. </div>
  290.  
  291. <div class="whole">
  292. <span class="name">status:</span> <Br />
  293. <span class="answer">Bored</span>
  294. </div>
  295.  
  296. </div><!--right-->
  297.  
  298. <!-- If you want to add more questions, copy <span class="question">likes?: </span> and replace likes?: with your own. -->
  299.  
  300. <span class="question">likes?: </span>
  301.  
  302. <!--- YOUR ANSWER -->
  303.  
  304. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus tellus eu eros viverra id semper massa blandit. Nam condimentum commodo dui, eget volutpat enim hendrerit mollis. Praesent fringilla pharetra nunc vitae sagittis. Proin elit urna, eleifend sed euismod at, bibendum ac nisi. Vestibulum pulvinar nisi sit amet dui consectetur ultrices.
  305.  
  306. <p></p><span class="question">dislikes?: </span>
  307.  
  308. <!--- YOUR ANSWER --->
  309. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus tellus eu eros viverra id semper massa blandit. Nam condimentum commodo dui, eget volutpat enim hendrerit mollis. Praesent fringilla pharetra nunc vitae sagittis. Proin elit urna, eleifend sed euismod at, bibendum ac nisi.
  310.  
  311. <p></p><span class="question">some facts about me: </span>
  312.  
  313. <!-- YOUR ANSWER -->
  314. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus tellus eu eros viverra id semper massa blandit. Nam condimentum commodo dui, eget volutpat enim hendrerit mollis. Praesent fringilla pharetra nunc vitae sagittis.
  315.  
  316. <p></p><span class="question">anything else you want to say?: </span>
  317.  
  318. <!-- YOUR ANSWER HERE -->
  319.  
  320. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus tellus eu eros viverra id semper massa blandit. Nam condimentum commodo dui, eget volutpat enim hendrerit mollis. Praesent fringilla pharetra nunc vitae sagittis. Proin elit urna, eleifend sed euismod at, bibendum ac nisi. Vestibulum pulvinar nisi sit amet dui consectetur ultrices.
  321.  
  322.  
  323. </div> <!-- info -->
  324.  
  325. </div><!--content-->
  326.  
  327. <!-- This is where you upload your picture on the top.
  328. I recommend that you use a render and only adjust these things below between top:-30px through width:370px and nothing else. -->
  329.  
  330. <div id="side_image">
  331. <img src="http://oi39.tinypic.com/34r6n3k.jpg" style="
  332. height:auto;
  333. left:50%;
  334. position:fixed;
  335.  
  336. top:-30px;
  337. margin-left:-290px;
  338. width:370px;
  339.  
  340. "/></div>
  341.  
  342.  
  343. </body>
  344. </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!