Advertisement
DimensionSlip

#1 Custom Page - Social Links (vAeonHunger)

Apr 7th, 2013
2,193
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.40 KB | None | 0 0
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.  
  4. <!--
  5. [#1: Social Links Page]
  6. vAeonHunger (Has Aeon and Hunger Tarot Cards)
  7. Page by DimensionSlip
  8. http://dimensionslip.tumblr.com
  9.  
  10. DO NOT REMOVE THIS PART OR THE CREDIT LINK
  11.  
  12. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.
  13. http://creativecommons.org/licenses/by-nc-nd/4.0/deed.en_US
  14. -->
  15.  
  16. <head>
  17.  
  18. <title>{Title} - Social Links</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21.  
  22. <link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>
  23. <link href='http://fonts.googleapis.com/css?family=Quattrocento' rel='stylesheet' type='text/css'>
  24. <link href='http://fonts.googleapis.com/css?family=Ovo' rel='stylesheet' type='text/css'>
  25.  
  26. <style type="text/css">
  27.  
  28. body {
  29. font-size: 12px;
  30. background-image: url('http://i.imgur.com/T4zcnvX.jpg');
  31. background-repeat: repeat;
  32. font-family: Verdana;
  33. background-color: #000;
  34. padding: 0px;
  35. color: #fce4e4;
  36. text-align:left;
  37. }
  38.  
  39. a img {
  40. border: none;
  41. text-decoration: none;
  42. }
  43.  
  44. a:link, a:active, a:visited {
  45. color: #b5bdc0;
  46. text-decoration:none;
  47. -webkit-transition: all 0.5s ease-in-out;
  48. -moz-transition: all 0.5s ease-in-out;
  49. -o-transition: all 0.5s ease-in-out;
  50. -ms-transition: all 0.5s ease-in-out;
  51. transition: all 0.5s ease-in-out;
  52. }
  53.  
  54. a:hover{
  55. color:#fff;
  56. -webkit-transition: all 0.5s ease-in-out;
  57. -moz-transition: all 0.5s ease-in-out;
  58. -o-transition: all 0.5s ease-in-out;
  59. -ms-transition: all 0.5s ease-in-out;
  60. transition: all 0.5s ease-in-out;
  61. }
  62.  
  63. b {
  64. color: #;
  65. }
  66.  
  67. i {
  68. color: #;
  69. font-face: Times;
  70. }
  71.  
  72. h1{
  73. color: #fff;
  74. font-family: georgia;
  75. font-size:25px;
  76. font-weight:bold;
  77. margin:0px;
  78. padding:0px;
  79. text-align:left;
  80. }
  81.  
  82. h2{
  83. color:#3e4241;
  84. font-family: Georgia;
  85. font-size:20px;
  86. margin:0px;
  87. padding:0px;
  88. padding-bottom: 5px;
  89. text-align:right;
  90. border-bottom: 1px dashed #d5d6fd;
  91. }
  92.  
  93. #page_title {
  94. color: #fff;
  95. font-family: 'Noto Serif', serif;
  96. font-size:25px;
  97. font-weight:bold;
  98. margin-left:80px;
  99. padding:0px;
  100. text-align:left;
  101. }
  102.  
  103. #links{
  104. text-align: center;
  105. width: 750px;
  106. height: 25px;
  107. border-top: 5px solid #fff;
  108. border-bottom: 5px solid #fff;
  109. background-color: #acb1a6;
  110. }
  111.  
  112. .page_number{
  113. cursor: pointer;
  114. cursor: hand;
  115. display: inline-block;
  116. *display: inline;
  117. zoom: 1;
  118. margin-left: 2px;
  119. text-align: center;
  120. }
  121.  
  122. .page_number img{
  123. width: 50px;
  124. }
  125.  
  126. .arcana_card{
  127. border: 2px solid #000;
  128. }
  129.  
  130. .arcana_card:hover{
  131. border: 2px solid #11427c;
  132. }
  133.  
  134. .highlight_page{
  135. background-color: #FD9B9B;
  136. color: #702525;
  137. }
  138.  
  139. #container {
  140. margin: 0 auto;
  141. width: 750px;
  142. }
  143.  
  144. #menu{
  145. margin-top: 100px;
  146. display: inline-block;
  147. *display: inline;
  148. zoom: 1;
  149. padding-top: 5px;
  150. padding-bottom: 5px;
  151. width: 250px;
  152. position: fixed;
  153. background-color: black;
  154. text-align: center;
  155. background: rgb(0, 0, 0);
  156. background: rgba(0, 0, 0, 0.8);
  157. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  158. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
  159. }
  160.  
  161. #arcana_desc{
  162. position: fixed;
  163. display: inline-block;
  164. background-image: url('http://i.imgur.com/sHgg9wV.png');
  165. /*background-color: #1C1C1C;*/
  166. *display: inline;
  167. zoom: 1;
  168. margin-top: 100px;
  169. margin-left: 260px;
  170. width: 480px;
  171. height: 430px;
  172. border: 5px solid #A0A0A0;
  173. -moz-border-radius: 5px;
  174. -webkit-border-radius: 5px;
  175. -khtml-border-radius: 5px;
  176. border-radius: 5px;
  177. overflow-y: scroll;
  178. overflow-x: hidden;
  179. }
  180.  
  181. #header{
  182. margin-top: 10px;
  183. position: fixed;
  184. width: 750px;
  185. }
  186.  
  187. #rank_up{
  188. position: fixed;
  189. margin-left: 320px;
  190. margin-top: -1px;
  191. z-index: -1;
  192. width: 200px;
  193. }
  194.  
  195. #card_back {
  196. width: 80px;
  197. position: fixed;
  198. margin-top: -30px;
  199. }
  200.  
  201. .arcana{
  202. margin: 5px;
  203. margin-bottom: 20px;
  204. }
  205.  
  206. .button_link {
  207. background-color: #E9E9E9;
  208. color:#702525;
  209. display: inline-block;
  210. *display: inline;
  211. zoom: 1;
  212. margin-left: 5px;
  213. margin-top: 2px;
  214. padding: 3px;
  215. width: 70px;
  216. text-align: center;
  217. vertical-align: middle;
  218. -moz-border-radius: 5px;
  219. -webkit-border-radius: 5px;
  220. -khtml-border-radius: 5px;
  221. border-radius: 5px;
  222. -webkit-transition: all 0.5s ease-in-out;
  223. -moz-transition: all 0.5s ease-in-out;
  224. -o-transition: all 0.5s ease-in-out;
  225. -ms-transition: all 0.5s ease-in-out;
  226. transition: all 0.5s ease-in-out;
  227. }
  228.  
  229. .button_link:hover{
  230. background-color: #292929;
  231. color: white;
  232. -webkit-transition: all 0.5s ease-in-out;
  233. -moz-transition: all 0.5s ease-in-out;
  234. -o-transition: all 0.5s ease-in-out;
  235. -ms-transition: all 0.5s ease-in-out;
  236. transition: all 0.5s ease-in-out;
  237. }
  238.  
  239.  
  240.  
  241. /*Person*/
  242. .icon{
  243. display: inline-block;
  244. *display: inline;
  245. zoom: 1;
  246. width: 70px;
  247. text-align: center;
  248. -moz-border-radius: 10px;
  249. -webkit-border-radius: 10px;
  250. -khtml-border-radius: 10px;
  251. border-radius: 10px;
  252. }
  253.  
  254. .icon img{
  255. width: 60px;
  256. border: 5px solid #292929;
  257. }
  258.  
  259. .rank {
  260. background-color: #292929;
  261. text-align: center;
  262. }
  263.  
  264. .person{
  265. width: 440px;
  266. padding: 5px;
  267. margin: 3px;
  268. display: inline-block;
  269. *display: inline;
  270. zoom: 1;
  271. font-size: 10px;
  272. }
  273.  
  274. .details{
  275. display: inline-block;
  276. *display: inline;
  277. zoom: 1;
  278. vertical-align: top;
  279. width: 350px;
  280. }
  281.  
  282. .name_cont {
  283. background-color: #292929;
  284. width: 350px;
  285. height: 20px;
  286. padding: 2px;
  287. vertical-align: middle;
  288. -moz-border-radius: 5px;
  289. -webkit-border-radius: 5px;
  290. -khtml-border-radius: 5px;
  291. border-radius: 5px;
  292. font-weight: bold;
  293. font-size: 14px;
  294. -webkit-transition: all 0.5s ease-in-out;
  295. -moz-transition: all 0.5s ease-in-out;
  296. -o-transition: all 0.5s ease-in-out;
  297. -ms-transition: all 0.5s ease-in-out;
  298. transition: all 0.5s ease-in-out;
  299. }
  300.  
  301. .name_cont {
  302. color: #fff;
  303. }
  304.  
  305. .name_cont:hover .title{
  306. background-color: #292929;
  307. color: white;
  308. }
  309.  
  310. .name_cont:hover {
  311. background-color: white;
  312. width: 370px;
  313. -webkit-transition: all 0.5s ease-in-out;
  314. -moz-transition: all 0.5s ease-in-out;
  315. -o-transition: all 0.5s ease-in-out;
  316. -ms-transition: all 0.5s ease-in-out;
  317. transition: all 0.5s ease-in-out;
  318. }
  319.  
  320. .name_cont:hover .name{
  321. color: #292929;
  322. }
  323.  
  324. .name {
  325. font-family: 'Quattrocento', serif;
  326. }
  327.  
  328. .description {
  329. padding: 2px;
  330. width: 350px;
  331. }
  332.  
  333. .description {
  334. margin-bottom: 2px;
  335. color: #292929;
  336. }
  337.  
  338. .title {
  339. text-align: center;
  340. color: #292929;
  341. margin-left: 2px;
  342. padding: 1px 3px;
  343. -moz-border-radius: 5px;
  344. -webkit-border-radius: 5px;
  345. -khtml-border-radius: 5px;
  346. border-radius: 5px;
  347. background-color: white;
  348. font-family: 'Ovo', serif;
  349. }
  350.  
  351. </style>
  352.  
  353. </head>
  354.  
  355. <body>
  356.  
  357. <div id="container">
  358.  
  359. <div id="header">
  360. <img id="card_back" src="http://i.imgur.com/sDzOFHV.png"/>
  361. <div id="page_title">Social Links <img id="rank_up" src="http://i.imgur.com/f9eMFzV.png" /></div>
  362. <div id="links">
  363. <a href="/"><div class="button_link">main</div></a>
  364. <a href="/ask"><div class="button_link">ask</div></a>
  365. <a href="http://dimensionslip.tumblr.com" title="Coded by DimensionSlip"><div class="button_link">credit</div></a>
  366. </div>
  367. </div>
  368.  
  369. <div id="menu">
  370. <div name="0" class="page_number">
  371. <a href="#fool"><img src="http://i.imgur.com/mQasCWY.png" title="Fool" class="arcana_card" /></a>
  372. </div>
  373. <div name="1" class="page_number">
  374. <a href="#magician"><img src="http://i.imgur.com/5VrLxnm.png" title="Magician" class="arcana_card" /></a>
  375. </div>
  376. <div name="2" class="page_number">
  377. <a href="#priestess"><img src="http://i.imgur.com/4E7JPrz.png" title="Priestess" class="arcana_card" /></a>
  378. </div>
  379. <div name="3" class="page_number">
  380. <a href="#empress"><img src="http://i.imgur.com/ILDWGyB.png" title="Empress" class="arcana_card" /></a>
  381. </div>
  382. <div name="4" class="page_number">
  383. <a href="#emperor"><img src="http://i.imgur.com/S2tNQ4N.png" title="Emperor" class="arcana_card" /></a>
  384. </div>
  385. <div name="5" class="page_number">
  386. <a href="#hierophant"><img src="http://i.imgur.com/YJ55LRe.png" title="Hierophant" class="arcana_card" /></a>
  387. </div>
  388. <div name="6" class="page_number">
  389. <a href="#lovers"><img src="http://i.imgur.com/c3mzloM.png" title="Lovers" class="arcana_card" /></a>
  390. </div>
  391. <div name="7" class="page_number">
  392. <a href="#chariot"><img src="http://i.imgur.com/CvYLRiY.png" title="Chariot" class="arcana_card" /></a>
  393. </div>
  394. <div name="8" class="page_number">
  395. <a href="#justice"><img src="http://i.imgur.com/qv9VGcr.png" title="Justice" class="arcana_card" /></a>
  396. </div>
  397. <div name="9" class="page_number">
  398. <a href="#hermit"><img src="http://i.imgur.com/Yyb7nZt.png" title="Hermit" class="arcana_card" /></a>
  399. </div>
  400. <div name="10" class="page_number">
  401. <a href="#fortune"><img src="http://i.imgur.com/hYTtGEY.png" title="Fortune" class="arcana_card" /></a>
  402. </div>
  403. <div name="11" class="page_number">
  404. <a href="#strength"><img src="http://i.imgur.com/O8ImBFj.png" title="Strength" class="arcana_card" /></a>
  405. </div>
  406. <div name="11_1" class="page_number">
  407. <a href="#hunger"><img src="http://i.imgur.com/GcRrw12.png" title="Hunger" class="arcana_card" /></a>
  408. </div>
  409. <div name="12" class="page_number">
  410. <a href="#hanged_man"><img src="http://i.imgur.com/ulK1cPT.png" title="Hanged Man" class="arcana_card" /></a>
  411. </div>
  412. <div name="13" class="page_number">
  413. <a href="#death"><img src="http://i.imgur.com/gE274Dn.png" title="Death" class="arcana_card" /></a>
  414. </div>
  415. <div name="14" class="page_number">
  416. <a href="#temperance"><img src="http://i.imgur.com/gP7seHF.png" title="Temperance" class="arcana_card" /></a>
  417. </div>
  418. <div name="15" class="page_number">
  419. <a href="#devil"><img src="http://i.imgur.com/88Lt9Lu.png" title="Devil" class="arcana_card" /></a>
  420. </div>
  421. <div name="16" class="page_number">
  422. <a href="#tower"><img src="http://i.imgur.com/qRzP4i9.png" title="Tower" class="arcana_card" /></a>
  423. </div>
  424. <div name="17" class="page_number">
  425. <a href="#star"><img src="http://i.imgur.com/tzOhb0p.png" title="Star" class="arcana_card" /></a>
  426. </div>
  427. <div name="18" class="page_number">
  428. <a href="#moon"><img src="http://i.imgur.com/myoCE5H.png" title="Moon" class="arcana_card" /></a>
  429. </div>
  430. <div name="19" class="page_number">
  431. <a href="#sun"><img src="http://i.imgur.com/Pofamly.png" title="Sun" class="arcana_card" /></a>
  432. </div>
  433. <div name="20" class="page_number">
  434. <a href="#judgement"><img src="http://i.imgur.com/QwI84WJ.png" title="Judgement" class="arcana_card" /></a>
  435. </div>
  436. <div name="20_1" class="page_number">
  437. <a href="#aeon"><img src="http://i.imgur.com/Rf9NMWU.png" title="Aeon" class="arcana_card" /></a>
  438. </div>
  439. <div name="21" class="page_number">
  440. <a href="#world"><img src="http://i.imgur.com/q2RJLzm.png" title="World" class="arcana_card" /></a>
  441. </div>
  442. </div>
  443.  
  444. <div id="arcana_desc">
  445.  
  446. <div id="fool" class="arcana">
  447. <a name="fool"></a>
  448. <h2>0. Fool</h2>
  449.  
  450. <!-- Skeleton for sample person-->
  451. <div class="person">
  452. <div class="icon">
  453. <!-- Rank is optional, can be removed -->
  454. <div class="rank">Rank X</div>
  455. <!-- Replace src with the avatar you want-->
  456. <img src="http://24.media.tumblr.com/avatar_993114f8bcb8_64.png"/>
  457. </div>
  458. <div class="details">
  459. <a href="http://LINK TO THE PERSON'S TUMBLR">
  460. <div class="name_cont">
  461. <span class="title">TITLE GOES HERE</span>
  462. <span class="name">NAME</span>
  463. </div>
  464. </a>
  465. <div class="description">
  466. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br/>
  467. </div>
  468. </div>
  469. </div>
  470. <!-- End skeleton for sample person-->
  471.  
  472. <!-- Without Rank view, copy-paste this instead if you want the version without the rank -->
  473. <div class="person">
  474. <div class="icon">
  475. <!-- Replace src with the avatar you want-->
  476. <img src="http://24.media.tumblr.com/avatar_993114f8bcb8_64.png"/>
  477. </div>
  478. <div class="details">
  479. <a href="http://LINK TO THE PERSON'S TUMBLR">
  480. <div class="name_cont">
  481. <span class="title">NO RANK</span>
  482. <span class="name">NAME</span>
  483. </div>
  484. </a>
  485. <div class="description">
  486. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br/>
  487. </div>
  488. </div>
  489. </div>
  490. <!-- End skeleton for without rank person-->
  491.  
  492. </div>
  493.  
  494. <div id="magician" class="arcana">
  495. <a name="magician"></a>
  496. <h2>I. Magician</h2>
  497. <!-- Start paste person data here-->
  498.  
  499. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  500. </div>
  501.  
  502. <div id="priestess" class="arcana">
  503. <a name="priestess"></a>
  504. <h2>II. Priestess</h2>
  505. <!-- Start paste person data here-->
  506.  
  507. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  508. </div>
  509.  
  510. <div id="empress" class="arcana">
  511. <a name="empress"></a>
  512. <h2>III. Empress</h2>
  513. <!-- Start paste person data here-->
  514.  
  515. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  516. </div>
  517.  
  518. <div id="emperor" class="arcana">
  519. <a name="emperor"></a>
  520. <h2>IV. Emperor</h2>
  521. <!-- Start paste person data here-->
  522.  
  523. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  524. </div>
  525.  
  526. <div id="hierophant" class="arcana">
  527. <a name="hierophant"></a>
  528. <h2>V. Hierophant</h2>
  529. <!-- Start paste person data here-->
  530.  
  531. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  532. </div>
  533.  
  534. <div id="lovers" class="arcana">
  535. <a name="lovers"></a>
  536. <h2>VI. Lovers</h2>
  537. <!-- Start paste person data here-->
  538.  
  539. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  540. </div>
  541.  
  542. <div id="chariot" class="arcana">
  543. <a name="chariot"></a>
  544. <h2>VII. Chariot</h2>
  545. <!-- Start paste person data here-->
  546.  
  547. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  548. </div>
  549.  
  550. <div id="justice" class="arcana">
  551. <a name="justice"></a>
  552. <h2>VIII. Justice</h2>
  553. <!-- Start paste person data here-->
  554.  
  555. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  556. </div>
  557.  
  558. <div id="hermit" class="arcana">
  559. <a name="hermit"></a>
  560. <h2>IX. Hermit</h2>
  561. <!-- Start paste person data here-->
  562.  
  563. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  564. </div>
  565.  
  566. <div id="fortune" class="arcana">
  567. <a name="fortune"></a>
  568. <h2>X. Fortune</h2>
  569. <!-- Start paste person data here-->
  570.  
  571. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  572. </div>
  573.  
  574. <div id="strength" class="arcana">
  575. <a name="strength"></a>
  576. <h2>XI. Strength</h2>
  577. <!-- Start paste person data here-->
  578.  
  579. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  580. </div>
  581.  
  582. <div id="hunger" class="arcana">
  583. <a name="hunger"></a>
  584. <h2>XI. Hunger</h2>
  585. <!-- Start paste person data here-->
  586.  
  587. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  588. </div>
  589.  
  590.  
  591. <div id="hanged_man" class="arcana">
  592. <a name="hanged_man"></a>
  593. <h2>XII. Hanged Man</h2>
  594. <!-- Start paste person data here-->
  595.  
  596. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  597. </div>
  598.  
  599. <div id="death" class="arcana">
  600. <a name="death"></a>
  601. <h2>XIII. Death</h2>
  602. <!-- Start paste person data here-->
  603.  
  604. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  605. </div>
  606.  
  607. <div id="temperance" class="arcana">
  608. <a name="temperance"></a>
  609. <h2>XIV. Temperance</h2>
  610. <!-- Start paste person data here-->
  611.  
  612. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  613. </div>
  614.  
  615. <div id="devil" class="arcana">
  616. <a name="devil"></a>
  617. <h2>XV. Devil</h2>
  618. <!-- Start paste person data here-->
  619.  
  620. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  621. </div>
  622.  
  623. <div id="tower" class="arcana">
  624. <a name="tower"></a>
  625. <h2>XVI. Tower</h2>
  626. <!-- Start paste person data here-->
  627.  
  628. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  629. </div>
  630.  
  631. <div id="star" class="arcana">
  632. <a name="star"></a>
  633. <h2>XVII. Star</h2>
  634. <!-- Start paste person data here-->
  635.  
  636. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  637. </div>
  638.  
  639. <div id="moon" class="arcana">
  640. <a name="moon"></a>
  641. <h2>XVIII. Moon</h2>
  642. <!-- Start paste person data here-->
  643.  
  644. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  645. </div>
  646.  
  647. <div id="sun" class="arcana">
  648. <a name="sun"></a>
  649. <h2>XIX. Sun</h2>
  650. <!-- Start paste person data here-->
  651.  
  652. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  653. </div>
  654.  
  655. <div id="judgement" class="arcana">
  656. <a name="judgement"></a>
  657. <h2>XX. Judgement</h2>
  658. <!-- Start paste person data here-->
  659.  
  660. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  661. </div>
  662.  
  663. <div id="aeon" class="arcana">
  664. <a name="aeon"></a>
  665. <h2>XX. Aeon</h2>
  666. <!-- Start paste person data here-->
  667.  
  668. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  669. </div>
  670.  
  671. <div id="world" class="arcana">
  672. <a name="world"></a>
  673. <h2>XXI. World</h2>
  674. <!-- Start paste person data here-->
  675.  
  676. <!-- End paste person data DO NOT PASTE BEYOND THIS POINT-->
  677. </div>
  678.  
  679. </div>
  680.  
  681. </div>
  682.  
  683. </body>
  684. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement