API tools faq
paste
Advertisement
7th-district

[Page #3] About Page

7th-district
Jan 5th, 2014
6,109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.05 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!--
  3. _______________________________________________________________________
  4.  
  5. ► PAGE MADE BY RACHEL @ ALMIGHTYONE.TUMBLR.COM
  6.  
  7. [PAGE #3] ABOUT PAGE
  8. If you have any questions, go to 7th-district.tumblr.com/message for help.
  9.  
  10. ► Terms Of Use
  11. - Do not remove the credit!
  12. - Do not block the credit with images or anything else.
  13. - Do not take parts of my theme codes and add it into your theme!
  14. _______________________________________________________________________
  15. -->
  16.  
  17. <html>
  18. <head>
  19.  
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}" />
  22.  
  23. <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'>
  24.  
  25. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  26. <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>
  27.  
  28. <style type="text/css">
  29.  
  30. #s-m-t-tooltip {
  31. position:relative;
  32. overflow:hidden;
  33. z-index:99999;
  34. max-width:110px;
  35. margin:10px 0 0 10px;
  36. padding:5px 7px;
  37. font:11px calibri;
  38. background:#fff;
  39. border:1px solid #e4e4e4;
  40. border-radius:5px;
  41. line-height:100%;
  42. text-align:center;
  43. color:#565656;
  44. }
  45.  
  46.  
  47. /* SCROLL BAR OVER HERE */
  48. ::-webkit-scrollbar-track {background-color:#fff;}
  49. ::-webkit-scrollbar-thumb {background-color:#6ad4fe;border:3px solid #fff;}
  50. ::-webkit-scrollbar {width:11px;height:5px;}
  51.  
  52. body {
  53. background:#f8f8f8; /*background color*/
  54. margin:0;
  55. padding:0;
  56. }
  57.  
  58. body a{
  59. text-decoration:none;
  60. }
  61.  
  62. #content{
  63. position:fixed;
  64. top:25%;
  65. left:50%;
  66. margin-left:-301px;
  67. width:600px;
  68. height:300px;
  69. padding:10px;
  70. border:1px solid #ddd; /* THE BORDER COLOR OF THE WHOLE BOX*/
  71. border-bottom:0px solid #ddd;
  72. background:#fafafa;
  73. border-bottom-left-radius:70px;
  74. border-bottom-right-radius:70px;
  75. }
  76.  
  77. /* THIS IS IS YOUR SIDE IMAGE ON THE LEFT*/
  78. #sideimg img {
  79. position:absolute;
  80. margin-left:-111px;
  81. margin-top:40px;
  82. width:200px;
  83. height:200px;
  84. border-radius:100%;
  85. padding:5px;
  86. border:1px solid #ddd;
  87. background:#Fff;
  88. }
  89.  
  90. /* YOUR LINKS */
  91. #links {
  92. float:left;
  93. text-align:right;
  94. width:500px;
  95. height:auto;
  96. margin-left:215px;
  97. margin-top:5px;
  98. }
  99.  
  100. #links a{
  101. float:left;
  102. color:#fff;
  103. background:#9be2ff;
  104. padding:1px 5px 2px 5px;
  105. border:1px solid e4e4e4;
  106. border-radius:5px;
  107. margin-left:5px;
  108. text-align:center;
  109. font-family:calibri;
  110. font-size:10px;
  111. letter-spacing:1px;
  112. text-transform:uppercase;
  113. -webkit-transition: all 0.5s ease-in-out;
  114. -moz-transition: all 0.5s ease-in-out;
  115. -ms-transition: all 0.5s ease-in-out;
  116. -o-transition: all 0.5s ease-in-out;
  117. }
  118.  
  119. #links a:hover{
  120. background:#6ad4fe;
  121. -webkit-transition: all 0.5s ease-in-out;
  122. -moz-transition: all 0.5s ease-in-out;
  123. -ms-transition: all 0.5s ease-in-out;
  124. -o-transition: all 0.5s ease-in-out;
  125. }
  126.  
  127. /* THIS IS YOUR TOP INFO THAT HAS YOUR NAME AGE AND GENDER */
  128. #topinfo{
  129. width:450px;
  130. float:left;
  131. font-family:calibri;
  132. margin-top:20px;
  133. margin-left:115px;
  134. font-size:12px;
  135. font-weight:bold;
  136. color:#565656;
  137.  
  138. }
  139.  
  140. .toptitle{
  141. font-family: calibri;
  142. text-transform:uppercase;
  143. letter-spacing:0px;
  144. font-size:11px;
  145. font-weight:none;
  146. color:#888;
  147. }
  148.  
  149. /* THE INFO ABOUT YOURSELF IN THE LITTLE BOX THAT SCROLLS */
  150. #about {
  151. position:absolute;
  152. margin-top:60px;
  153. margin-left:115px;
  154. width:450px;
  155. height:150px;
  156. border:1px solid #e4e4e4;
  157. padding:8px;
  158. font-family:calibri;
  159. font-size:11px;
  160. line-height:110%;
  161. color:#565656;
  162. overflow:auto;
  163. }
  164.  
  165. #about a{
  166. color:#4e99b3;
  167. -webkit-transition: all 0.5s ease-in-out;
  168. -moz-transition: all 0.5s ease-in-out;
  169. -ms-transition: all 0.5s ease-in-out;
  170. -o-transition: all 0.5s ease-in-out;
  171. }
  172.  
  173. #about a:hover{
  174. color:#76d2f7;
  175. -webkit-transition: all 0.5s ease-in-out;
  176. -moz-transition: all 0.5s ease-in-out;
  177. -ms-transition: all 0.5s ease-in-out;
  178. -o-transition: all 0.5s ease-in-out;
  179. }
  180.  
  181. #about b,
  182. #about strong {
  183. color:#89b5c4;
  184. font-weight:bold;
  185. }
  186.  
  187. #about i,
  188. #about em {
  189. color:#147493;
  190. font-style:italic;
  191. }
  192.  
  193. /* THE PATTERN IMAGE BELOW YOUR ABOUT ME */
  194. #bottom_img{
  195. position:absolute;
  196. background-image:url('http://24.media.tumblr.com/tumblr_m37lmqN7UD1rsx5i6o5_250.png'); /* REPLACE YOUR IMAGE BETWEEN THESE ' ' */
  197. height:60px;
  198. width:616px;
  199. margin-top:255px;
  200. margin-left:-8px;
  201. border-bottom-left-radius:70px;
  202. border-bottom-right-radius:70px;
  203. }
  204.  
  205. /* YOUR TITLE */
  206. #title{
  207. position:fixed;
  208. top:21%;
  209. left:50%;
  210. margin-left:-301px;
  211. width:618px;
  212. line-height:110%;
  213. font-family: 'Libre Baskerville', serif;
  214. font-style:italic;
  215. font-size:20px;
  216. color:#888;
  217. text-shadow:2px 2px 1px #ddd;
  218. z-index:99;
  219. }
  220.  
  221. object{
  222. position:fixed;
  223. top:50%;
  224. left:0px;
  225. width:100%;
  226. height:100%;
  227. z-index:-1;
  228. }
  229. /* this is the line the goes across the center of the page*/
  230. #line{
  231. position:fixed;
  232. background:#e4e4e4;
  233. top:48%;
  234. left:0px;
  235. width:100%;
  236. height:5px;
  237. z-index:-99;
  238. }
  239.  
  240. ul {
  241. line-height:110%;
  242. margin:0px;
  243. }
  244.  
  245. #music {
  246. opacity:.5;
  247. width:600px;
  248. float:left;
  249. margin-top:180px;
  250. margin-left:115px;
  251. }
  252.  
  253. </style>
  254. </head>
  255. <body>
  256.  
  257. <Div id="line"></Div>
  258.  
  259. <div id="title"><big style="opacity:.3;font-size:33px">❝ </big> Don't think about all those things you fear</div>
  260.  
  261. <div id="content">
  262.  
  263. <!-- YOUR LEFT SIDE IMAGE HERE -->
  264. <div id="sideimg"><img src="http://25.media.tumblr.com/d78e20f0a1da4d98b1bebb2e6f4b3c20/tumblr_motekyVEcH1rqu3s1o1_500.jpg" /></div>
  265.  
  266. <div id="links">
  267. <a href="/">home</a>
  268. <a href="/ask">message</a>
  269. <a href="/archive">history</a>
  270. <a href="/">link 1</a>
  271. <a href="/">link 2</a>
  272. <a href="/">link 3</a>
  273.  
  274. <!-- Do NOT remove or move the credit. -->
  275. <a href="http://almightyone.tumblr.com/" title="made by almightyone">theme</a>
  276. <!---------------------------------------------------------------->
  277.  
  278. </div> <!--links-->
  279.  
  280. <div id="topinfo"> <!-- please don't delete &nbsp; -->
  281. <span class="toptitle">name:</span> Gintoki &nbsp;&nbsp;
  282. <span class="toptitle">age:</span> 30 something? &nbsp;&nbsp;
  283. <span class="toptitle">gender:</span> Male &nbsp;&nbsp;
  284. </div>
  285.  
  286. <div id="about">
  287. <!-- YOU START YOUR ABOUT ME HERE -->
  288. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  289.  
  290.  
  291. <p>
  292. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  293. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  294. </p>
  295.  
  296. <p>
  297. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  298. </p>
  299.  
  300. <p>
  301. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  302. </p>
  303.  
  304. <p>
  305. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  306. </p>
  307.  
  308. </div> <!--- END OF TALKING ABOUT YOURSELF -->
  309.  
  310. <div id="music">
  311. <!-- DELETE THIS AND REPLACE THE BILLY PLAYER CODE HERE -->
  312. </div>
  313.  
  314. <div id="bottom_img"></div>
  315.  
  316. </div> <!--content-->
  317.  
  318.  
  319.  
  320.  
  321.  
  322.  
  323.  
  324.  
  325. </body>
  326. </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!