API tools faq
paste
7th-district

[Page #4] About Page

7th-district
Feb 8th, 2014
3,187
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.82 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. _______________________________________________________________________
  3.  
  4. ► PAGE MADE BY RACHEL @ ALMIGHTYONE.TUMBLR.COM
  5.  
  6. [PAGE #4] ABOUT PAGE
  7. If you have any questions, go to 7th-district.tumblr.com/message for help.
  8.  
  9. ► Terms Of Use
  10. - Do not remove the credit!
  11. - Do not block the credit with images or anything else.
  12. - Do not take parts of my theme codes and add it into your theme!
  13. _______________________________________________________________________
  14. -->
  15.  
  16. <html>
  17. <head>
  18.  
  19. <title>{Title}</title>
  20. <link rel="shortcut icon" href="{Favicon}" />
  21.  
  22. <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'> <!--
  23. font-family: 'Libre Baskerville', serif;
  24. -->
  25.  
  26. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  27. <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>
  28.  
  29. <style type="text/css">
  30.  
  31.  
  32.  
  33. /* SCROLL BAR OVER HERE */
  34. ::-webkit-scrollbar-track {background-color:#f3f3f3;}
  35. ::-webkit-scrollbar-thumb {background-color:#222;
  36. border-radius:10px;}
  37. ::-webkit-scrollbar {width:7px;height:5px;}
  38.  
  39. #s-m-t-tooltip {
  40. position:relative;
  41. overflow:hidden;
  42. z-index:999;
  43. max-width:200px;
  44. margin:10px 0 0 10px;
  45. padding:3px 6px 4px 6px;
  46. font:10px consolas;
  47. letter-spacing:1px;
  48. text-transform:uppercase;
  49. background:#111;
  50. border-radius:5px;
  51. line-height:100%;
  52. color:#fff;
  53. border:1px solid #111;
  54. }
  55.  
  56. body{
  57. background:#f3f3f3; /* this is your background color */
  58. margin:0;
  59. padding:0;
  60. }
  61.  
  62. body a{
  63. text-decoration:none;
  64. }
  65.  
  66. #content{
  67. position:absolute;
  68. top:90px;
  69. left:50%;
  70. margin-left:-223px;
  71. width:446px;
  72. height:auto;
  73. padding:5px;
  74. }
  75.  
  76. /* this is yo title */
  77. #title{
  78. color:#121212;
  79. font-family:cambria; /* your title font */
  80. text-align:center;
  81. padding:0px 5px 10px 8px;
  82. width:425px;
  83. border:0px solid red;
  84. line-height:80%;
  85. font-size:40px;
  86. text-shadow:3px 3px 1px #ddd;
  87. }
  88.  
  89. /* the background image behind your about me text */
  90. #back {
  91. background:url('http://25.media.tumblr.com/tumblr_luvtrlZDsC1qiav1uo3_400.png');
  92. width:auto;
  93. padding:15px;
  94. height:auto;
  95. border-radius:15px;
  96. box-shadow: 0 8px 10px -5px #888;
  97. -webkit-box-shadow: 0 8px 10px -5px #888;
  98. -moz-box-shadow: 0 8px 10px -5px #888;
  99.  
  100. }
  101.  
  102. /* your sidebar image */
  103. #sideimg img{
  104. float:left;
  105. padding:5px;
  106. margin-right:10px;
  107. background:#fff;
  108. width:150px;
  109. border-radius:15px;
  110. }
  111.  
  112. /* your about me text */
  113. #info {
  114. font-family:cambria;
  115. background:white;
  116. background-image:url('http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo2_250.png');
  117. font-size:11px;
  118. line-height:110%;
  119. color:#333;
  120. width:400px;
  121. padding:8px;
  122. text-align:left;
  123. border-radius:10px;
  124. }
  125.  
  126. #info:first-letter{
  127. font-size:12px;
  128. font-weight:bold;
  129. font-style:italic;
  130. letter-spacing:1px;
  131. }
  132.  
  133. /* your first letter when you start a new paragraph (delete this whole thing if you don't want it) */
  134. #info p:first-letter{
  135. font-size:14px;
  136. font-weight:bold;
  137. font-style:italic;
  138. letter-spacing:1px;
  139. text-transform:uppercase;
  140. }
  141.  
  142.  
  143. /* your links */
  144. #info a{
  145. color:#a10108;
  146. -webkit-transition: all 0.5s ease-in-out;
  147. -moz-transition: all 0.5s ease-in-out;
  148. -o-transition: all 0.5s ease-in-out;
  149. -ms-transition: all 0.5s ease-in-out;
  150. }
  151.  
  152. #info a:hover{
  153. color:#771010;
  154. -webkit-transition: all 0.5s ease-in-out;
  155. -moz-transition: all 0.5s ease-in-out;
  156. -o-transition: all 0.5s ease-in-out;
  157. -ms-transition: all 0.5s ease-in-out;
  158. }
  159.  
  160. /* bold words*/
  161. #info b,
  162. #info strong {
  163. color:#333;
  164. font-weight:bold;
  165. }
  166.  
  167. /* italic words */
  168. #info i,
  169. #info em {
  170. color:#d15959;
  171. font-style:italic;
  172. }
  173.  
  174. /* these are your line designs behind your about me (horizontal1 - horizontal5) */
  175. #horizontal1{
  176. position:absolute;
  177. background:url('http://25.media.tumblr.com/tumblr_luvtrlZDsC1qiav1uo3_400.png');
  178. top:190px;
  179. left:50%;
  180. margin-left:-370px;
  181. height:10px;
  182. width:700px;
  183. border-radius:15px;
  184. z-index:-1;
  185. }
  186.  
  187. #horizontal2{
  188. position:absolute;
  189. background:url('http://25.media.tumblr.com/tumblr_luvtrlZDsC1qiav1uo3_400.png');
  190. top:300px;
  191. left:50%;
  192. margin-left:-340px;
  193. height:15px;
  194. width:500px;
  195. border-radius:15px;
  196. z-index:-1;
  197. }
  198.  
  199. #horizontal3{
  200. position:absolute;
  201. background:url('http://25.media.tumblr.com/tumblr_luvtrlZDsC1qiav1uo3_400.png');
  202. top:330px;
  203. left:50%;
  204. margin-left:-390px;
  205. height:9px;
  206. width:700px;
  207. border-radius:15px;
  208. z-index:-1;
  209. }
  210.  
  211. #horizontal4{
  212. position:absolute;
  213. background:url('http://25.media.tumblr.com/tumblr_luvtrlZDsC1qiav1uo3_400.png');
  214. top:370px;
  215. left:50%;
  216. margin-left:-250px;
  217. height:17px;
  218. width:600px;
  219. border-radius:15px;
  220. z-index:-1;
  221. }
  222.  
  223. #horizontal5{
  224. position:absolute;
  225. background:url('http://25.media.tumblr.com/tumblr_luvtrlZDsC1qiav1uo3_400.png');
  226. top:440px;
  227. left:50%;
  228. margin-left:-390px;
  229. height:6px;
  230. width:800px;
  231. border-radius:15px;
  232. z-index:-1;
  233. }
  234.  
  235. /* your quote */
  236. #quote {
  237. font-family: 'Libre Baskerville', serif;
  238. font-size:14px;
  239. font-style:italic;
  240. color:#c80000;
  241. line-height:130%;
  242. text-shadow:3px 3px 1px #e4e4e4;
  243. padding-bottom:7px;
  244. }
  245.  
  246. #links {
  247. position:absolute;
  248. top:210px;
  249. left:50%;
  250. margin-left:-265px;
  251. width:530px;
  252. height:100px;
  253. border:0px solid black;
  254. }
  255.  
  256. /* your links */
  257. #rlinks{
  258. float:right;
  259. background:url('http://25.media.tumblr.com/tumblr_luvtrlZDsC1qiav1uo3_400.png'); /* your background of the links */
  260. border-top-right-radius:10px;
  261. border-bottom-right-radius:10px;
  262. height:100px;
  263. width:30px;
  264. text-align:left;
  265. padding:8px 5px 8px 8px;
  266. }
  267.  
  268. /* each individual link */
  269. #rlinks a img{
  270. float:left;
  271. background:#fafafa; /* background color of your navicons*/
  272. margin:3px;
  273. border-radius:5px;
  274. padding:1px 2px 2px 2px;
  275. transform:rotate(0deg);
  276. -ms-transform:rotate(0deg);
  277. -webkit-transform:rotate(0deg);
  278. -o-transform:rotate(0deg);
  279. -moz-transform:rotate(0deg);
  280. -webkit-transition: all 0.5s ease-in-out;
  281. -moz-transition: all 0.5s ease-in-out;
  282. -o-transition: all 0.5s ease-in-out;
  283. -ms-transition: all 0.5s ease-in-out;
  284. }
  285.  
  286. #rlinks a img:hover{
  287. opacity:.8;
  288. transform:rotate(360deg);
  289. -ms-transform:rotate(360deg);
  290. -webkit-transform:rotate(360deg);
  291. -o-transform:rotate(360deg);
  292. -moz-transform:rotate(360deg);
  293. -webkit-transition: all 0.5s ease-in-out;
  294. -moz-transition: all 0.5s ease-in-out;
  295. -o-transition: all 0.5s ease-in-out;
  296. -ms-transition: all 0.5s ease-in-out;
  297. }
  298.  
  299. /* the top pattern */
  300. #top {
  301. position:fixed;
  302. top:0;
  303. left:0;
  304. width:100%;
  305. height:15px;
  306. background:url('http://28.media.tumblr.com/tumblr_m1wdj7jVDU1r40twqo1_500.png');
  307. box-shadow:0px 0px 4px #777;
  308. z-index:9;
  309. }
  310.  
  311. /* bottom pattern */
  312. #bottom {
  313. position:fixed;
  314. bottom:0;
  315. left:0;
  316. width:100%;
  317. height:15px;
  318. background:url('http://28.media.tumblr.com/tumblr_m1wdj7jVDU1r40twqo1_500.png');
  319. box-shadow:0px 0px 4px #777;
  320. z-index:9;
  321. }
  322.  
  323. </style>
  324. </head>
  325. <body>
  326.  
  327. <div id="top"></div>
  328. <div id="bottom"></div>
  329.  
  330. <div id="horizontal1"></div>
  331. <div id="horizontal2"></div>
  332. <div id="horizontal3"></div>
  333. <div id="horizontal4"></div>
  334. <div id="horizontal5"></div>
  335.  
  336. <!-- these are your links -->
  337. <div id="links">
  338. <div id="rlinks">
  339. <a href="/" title="home"><img src="http://static.tumblr.com/3ikb5og/vcPn0cx2d/bhome.png" /></a>
  340. <A href="/ask" title="message"><img src="http://static.tumblr.com/3ikb5og/prFn0cx89/bask.png" /></A>
  341. <a href="/archive" title="history"><img src="http://static.tumblr.com/3ikb5og/fu3n0cxbh/barchive.png" /></a>
  342.  
  343. <!-- Do NOT remove the credit! -->
  344. <a href="http://almightyone.tumblr.com/" title="made by almightyone"><img src="http://static.tumblr.com/3ikb5og/O0un0cxcx/bcredit.png" /></a>
  345. </div>
  346. </div>
  347.  
  348. <div id="content">
  349. <div id="title">◒金魚</div> <!-- your title -->
  350.  
  351. <div id="back">
  352. <div id="info">
  353.  
  354. <div id="sideimg"><img src="http://25.media.tumblr.com/5678ce3e87cd8bb63ee771897cdc5090/tumblr_mutztnMl941svhw7zo1_500.jpg" /></div>
  355.  
  356. <!-- YOUR QUOTE -------------------------------------------------->
  357. <div id="quote"><big>❝</big> “It does not matter how slow you go so long as you do not stop.<big>❞</big>
  358. <br> <span style="color:#333;margin-left:160px;font-size:11px">- Confucious</span>
  359. </div>
  360.  
  361. <!-- BEGINNING OF YOUR ABOUT ME --------------------------------->
  362. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  363. <p>
  364. orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  365. <p>
  366. 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.</p>
  367.  
  368. <!-- END OF YOUR ABOUT ME ------------------------------------------->
  369.  
  370.  
  371. </div><!--info-->
  372. </div> <!--back -->
  373. </div> <!-- content -->
  374.  
  375.  
  376.  
  377.  
  378.  
  379.  
  380.  
  381.  
  382. </body>
  383. </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!