API tools faq
paste
7th-district

[Page #5] About Page: Gold

7th-district
Jun 27th, 2014
6,858
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.86 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. _______________________________________________________________________
  3.  
  4. ► PAGE MADE BY RACHEL @ ALMIGHTYONE.TUMBLR.COM
  5.  
  6. [PAGE #5] ABOUT PAGE (GOLD)
  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=Oswald:400,700' rel='stylesheet' type='text/css'>
  23.  
  24. <link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
  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. <head>
  30.  
  31. <style type="text/css">
  32.  
  33. /*tooltip*/
  34. #s-m-t-tooltip {
  35. position:relative;
  36. overflow:hidden;
  37. z-index:999;
  38. max-width:200px;
  39. margin:10px 0 0 10px;
  40. padding:4px 6px 4px 6px;
  41. font:10px calibri;
  42. letter-spacing:1px;
  43. text-transform:uppercase;
  44. background:#222;
  45. border-radius:5px;
  46. line-height:100%;
  47. color:#eee;
  48. box-shadow:0px 0px 3px #444;
  49. }
  50.  
  51. /* scrollbar */
  52. ::-webkit-scrollbar {
  53. width:11px;
  54. height:7px;
  55. }
  56.  
  57. ::-webkit-scrollbar-track-piece {
  58. background-color:#111; /* scrollbar background */
  59. }
  60. ::-webkit-scrollbar-thumb {
  61. background-color:#b35c64; /* scrollbar */
  62. border:2px solid #111; /* < change this to the same background color of the scrollbar background */
  63. border-right:4px solid #111; /* < change this to the same background color of the scrollbar background */
  64. border-radius:5px;
  65. }
  66.  
  67.  
  68. body{
  69. background:#fafafa;
  70. background-image:url('http://37.media.tumblr.com/tumblr_ls0w5txuft1r3vazto13_r1_400.png'); /* delete background-image if you just want a plain color background */
  71. background-attachment:fixed;
  72. background-repeat:repeat; /* if you do not want your background repeated simply change repeat to no-repeat */
  73. padding:0;
  74. margin:0;
  75. }
  76.  
  77. body a{
  78. text-decoration:none;
  79. }
  80.  
  81. /* this is just the box that holds everything in (title, sidebar image, info, quote, etc so i advise you not to edit this unless you know what you're doing */
  82. #content{
  83. position:fixed;
  84. top:17%;
  85. left:50%;
  86. margin-left:-425px;
  87. width:850px;
  88. height:auto;
  89. padding:10px;
  90. opacity:.9;
  91. }
  92.  
  93. #content li{
  94. list-style-type:square;
  95. margin:2px;
  96. }
  97.  
  98. /* links in the about me info */
  99. #content a{
  100. color:#dba0ac;
  101. -webkit-transition: all 0.5s ease-in-out;
  102. -moz-transition: all 0.5s ease-in-out;
  103. -ms-transition: all 0.5s ease-in-out;
  104. -o-transition: all 0.5s ease-in-out;
  105. }
  106.  
  107. #content a:hover{
  108. color:#e28178;
  109. -webkit-transition: all 0.5s ease-in-out;
  110. -moz-transition: all 0.5s ease-in-out;
  111. -ms-transition: all 0.5s ease-in-out;
  112. -o-transition: all 0.5s ease-in-out;
  113. }
  114.  
  115. /*italics*/
  116. #content i{
  117. font-size:11px;
  118. color:#e2c696;
  119. }
  120.  
  121. /*bold*/
  122. #content b{
  123. font-size:11px;
  124. color:#ca786e;
  125. }
  126.  
  127. /* sidebar image */
  128. #sideimg img{
  129. float:right;
  130. margin-top:-30px;
  131. width:250px;
  132. height:auto;
  133. padding:10px;
  134. background:#222;
  135. background-image:url('http://37.media.tumblr.com/tumblr_lxwynw0Pdg1r9g6hvo2_250.png'); /* <--- replace the BACKGROUND url NOT sidebar url. The sidebar url is in the HTML section below <body> */
  136. border-radius:7px;
  137. }
  138.  
  139. /* your title */
  140. #title{
  141. float:right;
  142. text-align:right;
  143. margin-top:-44px;
  144. margin-right:170px;
  145. width:350px;
  146. color:#fff1dd;
  147. line-height:100%;
  148. text-transform:uppercase;
  149. font-size:52px;
  150. letter-spacing:4px;
  151. font-family: 'Oswald', sans-serif;
  152. text-shadow:0px 0px 3px #444;
  153. }
  154.  
  155. /* first letter of the title */
  156. #title:first-letter{
  157. font-weight:700;
  158. color:#fff;
  159. text-shadow:0px 0px 3px #444;
  160. letter-spacing:5px;
  161. font-size:55px;
  162. }
  163.  
  164. /* this is a short introduction of yourself under the title. it can be a quote or your name, age, etc anything you like */
  165. #intro{
  166. margin-top:65px;
  167. margin-left:130px;
  168. padding:8px;
  169. text-align:center;
  170. font-family:arial;
  171. font-weight:bold;
  172. font-size:12px;
  173. line-height:110%;
  174. color:#fff;
  175. background-image:url('http://37.media.tumblr.com/tumblr_lxwynw0Pdg1r9g6hvo2_250.png');
  176. width:414px;
  177. height:auto;
  178. }
  179.  
  180. /* your about me info */
  181. #info{
  182. margin-top:20px;
  183. margin-left:137px;
  184. margin-left:;
  185. width:395px;
  186. height:300px;
  187. padding:10px;
  188. font-family: 'Noto Sans', sans-serif;
  189. color:#eee;
  190. background:#121212;
  191. background-image:url('http://38.media.tumblr.com/tumblr_m0g3ybPmqj1r6uwfxo6_1280.png');
  192. font-size:10px;
  193. line-height:120%;
  194. overflow:auto;
  195. border-radius:3px;
  196. }
  197.  
  198. /* these are the little boxes on the right of the title from #box1 - #box5
  199. it starts from right to left */
  200. #box1{
  201. float:right;
  202. margin-top:29px;
  203. margin-right:19px;
  204. width:13px;
  205. height:13px;
  206. background:#271d32; /* << edit the box color here */
  207. border-radius:3px;
  208. box-shadow:0px 0px 3px #333;
  209. }
  210.  
  211. #box2{
  212. float:right;
  213. margin-top:27px;
  214. margin-right:19px;
  215. width:15px;
  216. height:15px;
  217. background:#3e3355; /* << edit the box color here */
  218. box-shadow:0px 0px 3px #333;
  219. border-radius:3px;
  220. }
  221.  
  222. #box3{
  223. float:right;
  224. margin-top:29px;
  225. margin-right:19px;
  226. width:13px;
  227. height:13px;
  228. background:#542c47; /* << edit the box color here */
  229. box-shadow:0px 0px 3px #333;
  230. border-radius:3px;
  231. }
  232.  
  233. #box4{
  234. float:right;
  235. margin-top:27px;
  236. margin-right:19px;
  237. width:15px;
  238. height:15px;
  239. background:#6a4751; /* << edit the box color here */
  240. box-shadow:0px 0px 3px #333;
  241. border-radius:3px;
  242. }
  243.  
  244. #box5{
  245. float:right;
  246. margin-top:29px;
  247. margin-right:19px;
  248. width:13px;
  249. height:13px;
  250. background:#a95354; /* << edit the box color here */
  251. opacity:.9;
  252. box-shadow:0px 0px 3px #333;
  253. border-radius:3px;
  254. }
  255.  
  256. /* the horizontal and vertical background pattern that makes a weird lowercase t */
  257. #pattern_horizontal{
  258. position:fixed;
  259. top:19%;
  260. left:0px;
  261. height:65px;
  262. width:100%;
  263. background-image:url('http://37.media.tumblr.com/tumblr_lxwynw0Pdg1r9g6hvo2_250.png');
  264. opacity:;.9;
  265. z-index:-1;
  266. }
  267.  
  268. #pattern_vertical{
  269. position:fixed;
  270. top:0;
  271. left:20%;
  272. height:100%;
  273. width:50px;
  274. background-image:url('http://37.media.tumblr.com/tumblr_lxwynw0Pdg1r9g6hvo2_250.png');
  275. opacity:.9;
  276. z-index:-2;
  277. }
  278.  
  279. /* the borders around the screen */
  280. #border1{
  281. position:fixed;
  282. top:0;
  283. left:0;
  284. width:100%;
  285. height:15px;
  286. background-image:url('http://38.media.tumblr.com/tumblr_lzvjakQDzV1qhvdofo4_250.png'); /* <~--- this is where you change the background url for #border1 - #border4 */
  287. opacity:.9;
  288. }
  289.  
  290. #border2{
  291. position:fixed;
  292. top:0;
  293. left:0;
  294. width:10px;
  295. height:100%;
  296. background-image:url('http://38.media.tumblr.com/tumblr_lzvjakQDzV1qhvdofo4_250.png'); /* <~--- this is where you change the background url for #border1 - #border4 */
  297. opacity:.9;
  298. }
  299.  
  300. #border3{
  301. position:fixed;
  302. bottom:0;
  303. left:0;
  304. width:100%;
  305. height:15px;
  306. background-image:url('http://38.media.tumblr.com/tumblr_lzvjakQDzV1qhvdofo4_250.png'); /* <~--- this is where you change the background url for #border1 - #border4 */
  307. opacity:.9;
  308. }
  309.  
  310. #border4{
  311. position:fixed;
  312. top:0;
  313. right:0;
  314. width:10px;
  315. height:100%;
  316. background-image:url('http://38.media.tumblr.com/tumblr_lzvjakQDzV1qhvdofo4_250.png'); /* <~--- this is where you change the background url for #border1 - #border4 */
  317. opacity:.9;
  318. }
  319.  
  320. /* your links on the left */
  321. #links {
  322. position:absolute;
  323. margin-top:130px;
  324. margin-left:5px;
  325. width:100px;
  326. padding:8px;
  327. text-align:center;
  328. height:auto;
  329. background-image:url('http://37.media.tumblr.com/tumblr_lxwynw0Pdg1r9g6hvo2_250.png');
  330. border-radius:4px;
  331. }
  332.  
  333. #links .first{
  334. float:left;
  335. width: 90px;
  336. margin:4px 3px;
  337. padding:2px;
  338. text-transform:uppercase;
  339. font-size:9px;
  340. letter-spacing:1px;
  341. font-family: 'Noto Sans', sans-serif;
  342. color:#f2ddbc;
  343. background:#333; /*7c5862*/
  344. border-radius:4px;
  345. box-shadow:0px 0px 3px #555;
  346. -webkit-transition: all 0.5s ease-in-out;
  347. -moz-transition: all 0.5s ease-in-out;
  348. -ms-transition: all 0.5s ease-in-out;
  349. -o-transition: all 0.5s ease-in-out;
  350. }
  351.  
  352. #links .first:hover{
  353. color:#fff;
  354. background:#a95354;
  355. border-radius:6px;
  356. box-shadow:0px 0px 5px #444;
  357. -webkit-transition: all 0.5s ease-in-out;
  358. -moz-transition: all 0.5s ease-in-out;
  359. -ms-transition: all 0.5s ease-in-out;
  360. -o-transition: all 0.5s ease-in-out;
  361. }
  362.  
  363. #links .second{
  364. float:left;
  365. width: 90px;
  366. margin:4px 3px;
  367. padding:2px;
  368. text-transform:uppercase;
  369. font-size:9px;
  370. letter-spacing:1px;
  371. font-family: 'Noto Sans', sans-serif;
  372. color:#f7d4df;
  373. background:#222; /*7c5862*/
  374. border-radius:4px;
  375. box-shadow:0px 0px 3px #333;
  376. -webkit-transition: all 0.5s ease-in-out;
  377. -moz-transition: all 0.5s ease-in-out;
  378. -ms-transition: all 0.5s ease-in-out;
  379. -o-transition: all 0.5s ease-in-out;
  380. }
  381.  
  382. #links .second:hover{
  383. color:#fff;
  384. background:#6a4751;
  385. border-radius:6px;
  386. box-shadow:0px 0px 5px #444;
  387. -webkit-transition: all 0.5s ease-in-out;
  388. -moz-transition: all 0.5s ease-in-out;
  389. -ms-transition: all 0.5s ease-in-out;
  390. -o-transition: all 0.5s ease-in-out;
  391. }
  392.  
  393. </style>
  394. </head>
  395. <body>
  396.  
  397. <!--the borders-->
  398. <div id="border1"></div>
  399. <div id="border2"></div>
  400. <div id="border3"></div>
  401. <div id="border4"></div>
  402.  
  403. <!-- the background designs that go horizontal and vertical -->
  404. <div id="pattern_horizontal"></div>
  405. <div id="pattern_vertical"></div>
  406.  
  407. <div id="content">
  408.  
  409. <!-- this is where you change the sidebar image -->
  410. <div id="sideimg"><img src="http://37.media.tumblr.com/b17cc7ace4db9adc4bba1e0b57894924/tumblr_morlvxCzBY1rkbc2eo1_500.jpg" />
  411. </div>
  412.  
  413. <div id="box1"></div>
  414. <div id="box2"></div>
  415. <div id="box3"></div>
  416. <div id="box4"></div>
  417. <div id="box5"></div>
  418.  
  419. <!-- title ova here -->
  420. <div id="title">gold<big><big>⇤ </big></big></div>
  421.  
  422. <!-- links -->
  423. <div id="links">
  424. <a href="/" class="first">home</a>
  425. <a href="/ask" class="first">message</a>
  426. <a href="/archive" class="first">history</a>
  427. <!-- Do NOT remove or move the credit anywhere! Leave the credit intact in the theme AND code. -->
  428. <a href="http://almightyone.tumblr.com/" title="theme by almightyone" class="first">credit</a>
  429. <!-- ----------------------- !!!!!!!!!!!!!!!!! -------------------------->
  430.  
  431. <a href="/" class="second">link 1</a>
  432. <a href="/" class="second">link 2</a>
  433. <a href="/" class="second">link 3</a>
  434. <a href="/" class="second">link 4</a>
  435. </div>
  436.  
  437. <!-- intro as in quote/name/age/etc under the title -->
  438. <div id="intro">
  439. <i style="color:#dba0ac;font-size:12px"><big>❝</big> When it feels like a rush seeping into your soul, Stay gold. <big>❞</big></i> - Yuna
  440. </div>
  441.  
  442. <div id="info">
  443. <!-- this is where you start to talk about yourself ------------------->
  444. 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.
  445.  
  446. <p>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. 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>
  447.  
  448. <p>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>
  449.  
  450. <p>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>
  451.  
  452. <p>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>
  453. <!--------------------------- END OF YOUR INFO --------------------------------->
  454. </div> <!--info-->
  455.  
  456.  
  457. </div> <!--content-->
  458.  
  459. </body>
  460. </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!