Advertisement
bsethemes

votre esprit est comme la galaxie (meta ver.)

Jun 24th, 2015
1,398
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.81 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--HERE IS YOUR TITLE!!!!!!!!!!!!!!-->
  5. <title>
  6. {text:title}
  7. </title>
  8. <!--TITLE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
  9.  
  10. <link rel="shortcut icon" href="http://38.media.tumblr.com/tumblr_m230z8YSMN1qfamg6.gif">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12.  
  13. <script type="text/javascript">
  14. WebFontConfig = {
  15. google: { families: [ 'Abel::latin' ] }
  16. };
  17. (function() {
  18. var wf = document.createElement('script');
  19. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  20. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  21. wf.type = 'text/javascript';
  22. wf.async = 'true';
  23. var s = document.getElementsByTagName('script')[0];
  24. s.parentNode.insertBefore(wf, s);
  25. })(); </script>
  26.  
  27. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  28. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  29. <script>
  30. (function($){
  31. $(document).ready(function(){
  32. $("a[title]").style_my_tooltips({
  33. tip_follows_cursor:true,
  34. tip_delay_time:90,
  35. tip_fade_speed:100,
  36. attribute:"title"
  37. });
  38. });
  39. })(jQuery);
  40. </script>
  41.  
  42. <meta name="image:background" content=""/>
  43. <meta name="image:profile" content=""/>
  44.  
  45. <meta name="color:background" content="#000"/>
  46. <meta name="color:selection" content="#eaeaea"/>
  47. <meta name="color:tooltip" content="#000"/>
  48. <meta name="color:tooltip background" content="#fff"/>
  49.  
  50. <meta name="text:title" content="title"/>
  51. <meta name="text:name" content="Name"/>
  52. <meta name="text:age" content="Age"/>
  53. <meta name="text:extra info 1" content="Nationality"/>
  54. <meta name="text:extra info 2" content="Personality"/>
  55. <meta name="text:about" content="Tags and FAQ are added manually"/>
  56. <meta name="text:link1 url" content="http://"/>
  57. <meta name="text:link1" content="link"/>
  58. <meta name="text:link2 url" content="http://"/>
  59. <meta name="text:link2" content="link"/>
  60. <meta name="text:link3 url" content="http://"/>
  61. <meta name="text:link3" content="link"/>
  62. <meta name="text:link4 url" content="http://"/>
  63. <meta name="text:link4" content="link"/>
  64.  
  65. <style type="text/css">
  66.  
  67.  
  68.  
  69. body {
  70. font-family: 'Abel', sans-serif;
  71. color:#000;
  72. font-size:14px;
  73. background-color:{color:background};
  74. background-image:url('{image:background}');
  75. background-attachment:fixed;
  76. background-size:cover;
  77. background-position:center;
  78. }
  79.  
  80. a {
  81. text-decoration:none;
  82. color:#fff;
  83. }
  84.  
  85. a:hover {
  86. text-decoration:underline;
  87. }
  88.  
  89. #s-m-t-tooltip {
  90. max-width:200px;
  91. margin:25px 20px 25px 20px;
  92. background-color:{color:tooltip background};
  93. color:{color:tooltip};
  94. border:1px solid black;
  95. font-size:10px;
  96. line-height:13px;
  97. padding:3px 5px 4px 5px;
  98. box-shadow:rgba(0,0,0,0.07) 4px 4px;
  99. -webkit-transition: all 0.2s ease-out;
  100. -moz-transition: all 0.2s ease-out;
  101. transition: all 0.2s ease-out;
  102. z-index:999999999999999999999999999999999999;
  103. }
  104.  
  105. ::-webkit-scrollbar-thumb {
  106. height:auto;
  107. background-color:#fff;
  108. }
  109.  
  110. ::-webkit-scrollbar {
  111. height:9px;
  112. width:3px;
  113. background-color:transparent;
  114. }
  115.  
  116. ::-moz-selection {
  117. background: transparent;
  118. text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
  119. font-weight:bold;
  120. color:{color:selection};
  121. }
  122.  
  123. ::selection {
  124. background: transparent;
  125. text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
  126. font-weight:bold;
  127. color:{color:selection};
  128. }
  129.  
  130. h3 {
  131. letter-spacing:3px;
  132. text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
  133. text-transform:uppercase;
  134. margin-top:55px;
  135. }
  136.  
  137. #thesun {
  138. width:142px;
  139. height:142px;
  140. border-radius:100%;
  141. top: 38%;
  142. left: 46%;
  143. position:absolute;
  144. background:#FEB700;
  145. z-index:1;
  146. }
  147.  
  148. #info1 {
  149. opacity:0;
  150. width:60px;
  151. height:60px;
  152. background:#fff;
  153. text-align:center;
  154. margin-top:5px;
  155. margin-left:5px;
  156. position:absolute;
  157. border:3px solid #ffe5a5;
  158. border-top-left-radius:100%;
  159. border-top-right-radius:5%;
  160. border-bottom-left-radius:5%;
  161. border-bottom-right-radius:5%;
  162. -webkit-transition-duration: 1s;
  163. -moz-transition-duration: 1s;
  164. -o-transition-duration: 1s;
  165. transition-duration: 1s;
  166. }
  167.  
  168. #info1 p {
  169. color:#ffe5a5;
  170. font-weight:bold;
  171. font-size:12px;
  172. padding-bottom:0px;
  173. padding-right:0px;
  174. padding-top:15px;
  175. padding-left:5px;
  176. }
  177.  
  178. #info2 {
  179. opacity:0;
  180. width:60px;
  181. height:60px;
  182. background:#fff;
  183. text-align:center;
  184. margin-top:5px;
  185. margin-left:73px;
  186. position:absolute;
  187. border:3px solid #ffd06b;
  188. border-top-right-radius:100%;
  189. border-top-left-radius:5%;
  190. border-bottom-left-radius:5%;
  191. border-bottom-right-radius:5%;
  192. -webkit-transition-duration: 1s;
  193. -moz-transition-duration: 1s;
  194. -o-transition-duration: 1s;
  195. transition-duration: 1s;
  196. }
  197.  
  198. #info2 p {
  199. color:#ffd06b;
  200. font-weight:bold;
  201. font-size:15px;
  202. padding-bottom:0px;
  203. padding-right:20px;
  204. padding-top:10px;
  205. padding-left:0px;
  206. }
  207.  
  208. #info3 {
  209. opacity:0;
  210. width:60px;
  211. height:60px;
  212. background:#fff;
  213. text-align:center;
  214. margin-top:73px;
  215. margin-left:5px;
  216. position:absolute;
  217. border:3px solid #e89e00;
  218. border-bottom-left-radius:100%;
  219. border-top-right-radius:5%;
  220. border-top-left-radius:5%;
  221. border-bottom-right-radius:5%;
  222. -webkit-transition-duration: 1s;
  223. -moz-transition-duration: 1s;
  224. -o-transition-duration: 1s;
  225. transition-duration: 1s;
  226. }
  227.  
  228. #info3 p {
  229. color:#ba7f00;
  230. font-weight:bold;
  231. font-size:12px;
  232. padding-bottom:00px;
  233. padding-right:0px;
  234. padding-top:5px;
  235. padding-left:5px;
  236. }
  237.  
  238. #info4 {
  239. opacity:0;
  240. width:60px;
  241. height:60px;
  242. background:#fff;
  243. text-align:center;
  244. margin-top:73px;
  245. margin-left:73px;
  246. position:absolute;
  247. border:3px solid #ba7f00;
  248. border-bottom-right-radius:100%;
  249. border-top-right-radius:5%;
  250. border-bottom-left-radius:5%;
  251. border-top-left-radius:5%;
  252. -webkit-transition-duration: 1s;
  253. -moz-transition-duration: 1s;
  254. -o-transition-duration: 1s;
  255. transition-duration: 1s;
  256. }
  257.  
  258. #info4 p {
  259. color:#ba7f00;
  260. font-weight:bold;
  261. font-size:12px;
  262. padding-bottom:40px;
  263. padding-right:13px;
  264. padding-top:0px;
  265. padding-left:0px;
  266. }
  267.  
  268. #thesun:hover #info1 {
  269. opacity:1;
  270. -webkit-transition-duration: 1s;
  271. -moz-transition-duration: 1s;
  272. -o-transition-duration: 1s;
  273. transition-duration: 1s;
  274. }
  275.  
  276. #thesun:hover #info2 {
  277. opacity:1;
  278. -webkit-transition-duration: 2s;
  279. -moz-transition-duration: 2s;
  280. -o-transition-duration: 2s;
  281. transition-duration: 2s;
  282. }
  283.  
  284. #thesun:hover #info3 {
  285. opacity:1;
  286. -webkit-transition-duration: 3s;
  287. -moz-transition-duration: 3s;
  288. -o-transition-duration: 3s;
  289. transition-duration: 3s;
  290. }
  291.  
  292. #thesun:hover #info4 {
  293. opacity:1;
  294. -webkit-transition-duration: 4s;
  295. -moz-transition-duration: 4s;
  296. -o-transition-duration: 4s;
  297. transition-duration: 4s;
  298. }
  299.  
  300. #mercurystrack {
  301. width:182px;
  302. height:182px;
  303. border-radius:50%;
  304. top: 225px;
  305. left: 605px;
  306. position:absolute;
  307. z-index:-1;
  308. border:1px solid #fff;
  309. }
  310.  
  311. #mercury {
  312. width:15px;
  313. height:15px;
  314. border-radius:50%;
  315. top:310px;
  316. left:781px;
  317. position:absolute;
  318. background:#821903;
  319. color:#821903;
  320. overflow:hidden;
  321. -webkit-transition-duration: 1s;
  322. -moz-transition-duration: 1s;
  323. -o-transition-duration: 1s;
  324. transition-duration: 1s;
  325. }
  326.  
  327. #mercury:hover {
  328. padding:10px;
  329. text-align:justify;
  330. overflow:auto;
  331. color:#fff;
  332. width:200px;
  333. height:205px;
  334. border-radius:0%;
  335. z-index:1;
  336. -webkit-transition-duration: 1s;
  337. -moz-transition-duration: 1s;
  338. -o-transition-duration: 1s;
  339. transition-duration: 1s;
  340. }
  341.  
  342. #mercury:first-letter {
  343. font-weight:bold;
  344. letter-spacing:2px;
  345. font-size:18px;
  346. }
  347.  
  348. #venustrack {
  349. width:220px;
  350. height:220px;
  351. border-radius:50%;
  352. top: 205px;
  353. left: 585px;
  354. position:absolute;
  355. z-index:-1;
  356. border:1px solid #fff;
  357. }
  358.  
  359. #venus {
  360. width:20px;
  361. height:20px;
  362. border-radius:50%;
  363. top:240px;
  364. left:775px;
  365. position:absolute;
  366. background:#C57C02;
  367. color:#fd3b00;
  368. overflow:hidden;
  369. -webkit-transition-duration: 1s;
  370. -moz-transition-duration: 1s;
  371. -o-transition-duration: 1s;
  372. transition-duration: 1s;
  373. }
  374.  
  375. #venus:hover {
  376. width:100px;
  377. height:100px;
  378. top:200px;
  379. left:745px;
  380. content:url('{image:profile}');
  381. -webkit-transition-duration: 0.5s;
  382. -moz-transition-duration: 0.5s;
  383. -o-transition-duration: 0.5s;
  384. transition-duration: 0.5s;
  385. }
  386.  
  387.  
  388. #tag {
  389. border-bottom:1px solid #fff;
  390. border-right:1px solid #fff;
  391. margin-bottom:10px;
  392. text-align:center;
  393. -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.45);
  394. -moz-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.45);
  395. box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.45);
  396. -webkit-transition-duration: 2s;
  397. -moz-transition-duration: 2s;
  398. -o-transition-duration: 2s;
  399. transition-duration: 2s;
  400. }
  401.  
  402. #tag a {
  403. letter-spacing:2px;
  404. text-decoration:none;
  405. color:#fff;
  406. -webkit-transition-duration: 0.5s;
  407. -moz-transition-duration: 0.5s;
  408. -o-transition-duration: 0.5s;
  409. transition-duration: 0.5s;
  410. }
  411.  
  412. #tag a:hover {
  413. color:#000;
  414. text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
  415. background:#fff;
  416. padding-right:62px;
  417. padding-left:62px;
  418. -webkit-transition-duration: 0.5s;
  419. -moz-transition-duration: 0.5s;
  420. -o-transition-duration: 0.5s;
  421. transition-duration: 0.5s;
  422. }
  423.  
  424. #tag:hover {
  425. -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45);
  426. -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45);
  427. box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45);
  428. -webkit-transition-duration: 2s;
  429. -moz-transition-duration: 2s;
  430. -o-transition-duration: 2s;
  431. transition-duration: 2s;
  432. }
  433. #earthstrack {
  434. width:260px;
  435. height:260px;
  436. border-radius:50%;
  437. top: 185px;
  438. left: 565px;
  439. position:absolute;
  440. z-index:-1;
  441. border:1px solid #fff;
  442. }
  443.  
  444. #themoon {
  445. width:10px;
  446. height:10px;
  447. top:240px;
  448. left:562px;
  449. position:absolute;
  450. background
  451. }
  452.  
  453. #earth {
  454. width:30px;
  455. height:30px;
  456. border-radius:50%;
  457. top:230px;
  458. left:572px;
  459. position:absolute;
  460. background:#034883;
  461. color:#034883;
  462. overflow:hidden;
  463. -webkit-transition-duration: 1s;
  464. -moz-transition-duration: 1s;
  465. -o-transition-duration: 1s;
  466. transition-duration: 1s;
  467. }
  468.  
  469. #earth:hover {
  470. width:150px;
  471. height:210px;
  472. top:210px;
  473. left:500px;
  474. color:#fff;
  475. z-index:1;
  476. padding:10px;
  477. overflow:auto;
  478. border-radius:0%
  479. }
  480.  
  481. #earth:hover h3 {
  482. margin-top:-5px;
  483. }
  484.  
  485. #marstrack {
  486. width:300px;
  487. height:300px;
  488. border-radius:50%;
  489. top: 165px;
  490. left: 545px;
  491. position:absolute;
  492. z-index:-1;
  493. border:1px solid #fff;
  494. }
  495.  
  496. #mars {
  497. width:25px;
  498. height:25px;
  499. border-radius:50%;
  500. top:400px;
  501. left:800px;
  502. position:absolute;
  503. background:#CB320F;
  504. color:#CB320F;
  505. overflow:hidden;
  506. -webkit-transition-duration: 1s;
  507. -moz-transition-duration: 1s;
  508. -o-transition-duration: 1s;
  509. transition-duration: 1s;
  510. }
  511.  
  512. #mars:hover {
  513. width:150px;
  514. height:210px;
  515. top:360px;
  516. left:750px;
  517. color:#fff;
  518. padding:10px;
  519. overflow:auto;
  520. z-index:1;
  521. border-radius:0%
  522. }
  523.  
  524. #mars:hover h3 {
  525. margin-top:-5px;
  526. }
  527.  
  528. #jupiterstrack {
  529. width:380px;
  530. height:380px;
  531. border-radius:50%;
  532. top: 130px;
  533. left: 510px;
  534. position:absolute;
  535. z-index:-1;
  536. border:1px solid #fff;
  537. }
  538.  
  539. #jupiter {
  540. width:60px;
  541. height:60px;
  542. border-radius:50%;
  543. top:415px;
  544. left:530px;
  545. position:absolute;
  546. background:#523A1C;
  547. color:#523A1C;
  548. overflow:hidden;
  549. -webkit-transition-duration: 1s;
  550. -moz-transition-duration: 1s;
  551. -o-transition-duration: 1s;
  552. transition-duration: 1s;
  553. }
  554.  
  555. #jupiter:hover {
  556. width:150px;
  557. height:210px;
  558. top:400px;
  559. left:500px;
  560. color:#fff;
  561. padding:10px;
  562. overflow:auto;
  563. z-index:1;
  564. border-radius:0%
  565. }
  566.  
  567. #jupiter:hover h3 {
  568. margin-top:20px;
  569. }
  570.  
  571. #jupiter:hover h3 {
  572. margin-top:-5px;
  573. }
  574.  
  575. #saturnstrack {
  576. width:470px;
  577. height:470px;
  578. border-radius:50%;
  579. top: 85px;
  580. left: 465px;
  581. position:absolute;
  582. z-index:-1;
  583. border:1px solid #fff;
  584. }
  585.  
  586. #saturnsring {
  587. width:65px;
  588. height:20px;
  589. top:115px;
  590. left:793px;
  591. position:absolute;
  592. border-radius:100%;
  593. border-top:1px solid #8E5715;
  594. border-bottom:2px solid #C9B89C;
  595. border-right:2px solid #C9B89C;
  596. border-left:2px solid #C9B89C;
  597. }
  598.  
  599. #saturn {
  600. width:55px;
  601. height:50px;
  602. border-radius:50%;
  603. top:100px;
  604. left:800px;
  605. position:absolute;
  606. background:#8E5715;
  607. color:#8E5715;
  608. overflow:hidden;
  609. -webkit-transition-duration: 1s;
  610. -moz-transition-duration: 1s;
  611. -o-transition-duration: 1s;
  612. transition-duration: 1s;
  613. }
  614.  
  615. #saturn:hover {
  616. width:150px;
  617. height:210px;
  618. top:60px;
  619. left:750px;
  620. color:#fff;
  621. padding:10px;
  622. overflow:auto;
  623. z-index:1;
  624. border-radius:0%
  625. }
  626.  
  627. #saturn:hover #saturnsring {
  628. width:0px;
  629. height:0px;
  630. top:0px;
  631. left:0px;
  632. }
  633.  
  634. #saturn:hover h3 {
  635. margin-top:-2px;
  636. }
  637.  
  638. #link {
  639. background:#fff;
  640. padding:5px;
  641. text-align:center;
  642. margin-bottom:10px;
  643. border:1px solid #c0c0c0;
  644. -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.45);
  645. -moz-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.45);
  646. box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.45);
  647. -webkit-transition-duration: 1.5s;
  648. -moz-transition-duration: 1.5s;
  649. -o-transition-duration: 1.5s;
  650. transition-duration: 1.5s;
  651. }
  652.  
  653. #link a {
  654. font-weight:bold;
  655. color:#c0c0c0;
  656. letter-spacing:5px;
  657. text-transform:uppercase;
  658. -webkit-transition-duration: 0.5s;
  659. -moz-transition-duration: 0.5s;
  660. -o-transition-duration: 0.5s;
  661. transition-duration: 0.5px;
  662. }
  663.  
  664. #link a:hover {
  665. text-decoration:none;
  666. letter-spacing:10px;
  667. -webkit-transition-duration: 0.5s;
  668. -moz-transition-duration: 0.5s;
  669. -o-transition-duration: 0.5s;
  670. transition-duration: 0.5s;
  671. }
  672.  
  673. #link:hover {
  674. -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45);
  675. -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45);
  676. box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45);
  677. -webkit-transition-duration: 1.5s;
  678. -moz-transition-duration: 1.5s;
  679. -o-transition-duration: 1.5s;
  680. transition-duration: 1.5s;
  681. }
  682.  
  683. #uranustrack {
  684. width:540px;
  685. height:540px;
  686. border-radius:50%;
  687. top: 50px;
  688. left: 430px;
  689. position:absolute;
  690. z-index:-1;
  691. border:1px solid #fff;
  692. }
  693.  
  694. #uranusring {
  695. width:54px;
  696. height:20px;
  697. top:53px;
  698. left:594px;
  699. position:absolute;
  700. border-radius:100%;
  701. border-top:1px solid #384B59;
  702. border-bottom:2px solid #596A75;
  703. border-right:2px solid #596A75;
  704. border-left:2px solid #596A75;
  705. }
  706.  
  707. #uranus {
  708. width:45px;
  709. height:45px;
  710. border-radius:50%;
  711. top:40px;
  712. left:600px;
  713. position:absolute;
  714. background:#384B59;
  715. color:#384B59;
  716. overflow:hidden;
  717. -webkit-transition-duration: 1s;
  718. -moz-transition-duration: 1s;
  719. -o-transition-duration: 1s;
  720. transition-duration: 1s;
  721. }
  722.  
  723. #uranus:hover {
  724. width:200px;
  725. height:220px;
  726. top:20px;
  727. left:550px;
  728. color:#fff;
  729. padding:10px;
  730. overflow:auto;
  731. z-index:1;
  732. border-radius:0%
  733. }
  734.  
  735. #uranus:hover h3 {
  736. margin-top:-3px;
  737. }
  738.  
  739. #uranus:hover #uranusring {
  740. width:0px;
  741. height:0px;
  742. top:0px;
  743. left:0px;
  744. }
  745.  
  746. #uranus img {
  747. border-radius:50%;
  748. border:1px solid #c0c0c0;
  749. padding:5px;
  750. margin-right:5px;
  751. }
  752.  
  753. #neptunestrack {
  754. width:600px;
  755. height:600px;
  756. border-radius:50%;
  757. top: 20px;
  758. left: 400px;
  759. position:absolute;
  760. z-index:-1;
  761. border:1px solid #fff;
  762. }
  763.  
  764. #neptune {
  765. width:45px;
  766. height:40px;
  767. border-radius:50%;
  768. top:260px;
  769. left:380px;
  770. position:absolute;
  771. background:#274AB6;
  772. color:#274AB6;
  773. overflow:hidden;
  774. -webkit-transition-duration: 1s;
  775. -moz-transition-duration: 1s;
  776. -o-transition-duration: 1s;
  777. transition-duration: 1s;
  778. }
  779.  
  780. #neptune:hover {
  781. width:200px;
  782. height:210px;
  783. top:240px;
  784. left:330px;
  785. color:#fff;
  786. padding:10px;
  787. overflow:auto;
  788. z-index:1;
  789. border-radius:0%
  790. }
  791.  
  792. #neptune:hover h3 {
  793. margin-top:-3px;
  794. }
  795.  
  796. #q {
  797. padding:5px;
  798. background-color:rgba(255,255,255,0.5);
  799. color:#fff;
  800. text-transform:capitalize;
  801. border:1px solid #fff;
  802. letter-spacing:2px;
  803. margin-bottom:5px;
  804. }
  805.  
  806. #a {
  807. text-align:justify;
  808. text-transform:capitalize;
  809. margin-bottom:5px;
  810. letter-spacing:1px;
  811. }
  812.  
  813. #plutostrack {
  814. width:720px;
  815. height:620px;
  816. border-radius:50%;
  817. top: 10px;
  818. left: 340px;
  819. position:absolute;
  820. z-index:-1;
  821. border:1px solid #fff;
  822. }
  823.  
  824. #pluto {
  825. width:10px;
  826. height:10px;
  827. border-radius:50%;
  828. top:500px;
  829. left:987px;
  830. position:absolute;
  831. background:#A79AA2;
  832. color:#A79AA2;
  833. overflow:hidden;
  834. -webkit-transition-duration: 1s;
  835. -moz-transition-duration: 1s;
  836. -o-transition-duration: 1s;
  837. transition-duration: 1s;
  838. }
  839.  
  840. #pluto:hover {
  841. width:305px;
  842. height:255px;
  843. top:350px;
  844. left:820px;
  845. color:#fff;
  846. padding:10px;
  847. overflow:auto;
  848. z-index:1;
  849. border-radius:0%
  850. }
  851.  
  852. #credit {
  853. position:fixed;
  854. right:10px;
  855. bottom:10px;
  856. background-color:rgba(255, 255, 255, 0.5);
  857. padding:5px;
  858. letter-spacing:5px;
  859. border:1px solid #fff;
  860. -webkit-box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 0.2);
  861. -moz-box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 0.2);
  862. box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 0.2);
  863. -webkit-transition-duration: 1s;
  864. -moz-transition-duration: 1s;
  865. -o-transition-duration: 1s;
  866. transition-duration: 1s;
  867. }
  868.  
  869. #credit a {
  870. font-weight:bold;
  871. font-size:15px;
  872. text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
  873. }
  874.  
  875. #credit:hover {
  876. -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.2);
  877. -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.2);
  878. box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.2);
  879. -webkit-transition-duration: 1s;
  880. -moz-transition-duration: 1s;
  881. -o-transition-duration: 1s;
  882. transition-duration: 1s;
  883. }
  884.  
  885. </style>
  886. </head>
  887. <body>
  888. <div id="thesun">
  889. <div id="info1"><p>{text:name}</p></div>
  890. <div id="info2"><p>{text:age}</p></div>
  891. <div id="info3"><p>{text:extra info 1}</p></div>
  892. <div id="info4"><p>{text:extra info 2}</p></div>
  893. </div>
  894.  
  895. <div id="mercury">
  896. {text:about}
  897. </div>
  898.  
  899. <div id="venus"></div>
  900. <div id="earth">
  901. <h3>Tags</h3>
  902.  
  903. <div id="tag"><a href="/">Tag</a></div>
  904. <div id="tag"><a href="/">Tag</a></div>
  905. <div id="tag"><a href="/">Tag</a></div>
  906. <div id="tag"><a href="/">Tag</a></div>
  907. <div id="tag"><a href="/">Tag</a></div>
  908. <div id="tag"><a href="/">Tag</a></div>
  909. </div>
  910. <div id="mars">
  911. <h3>Tags</h3>
  912.  
  913. <div id="tag"><a href="/">Tag</a></div>
  914. <div id="tag"><a href="/">Tag</a></div>
  915. <div id="tag"><a href="/">Tag</a></div>
  916. <div id="tag"><a href="/">Tag</a></div>
  917. <div id="tag"><a href="/">Tag</a></div>
  918. <div id="tag"><a href="/">Tag</a></div>
  919. </div>
  920. <div id="jupiter">
  921. <h3>Tags</h3>
  922.  
  923. <div id="tag"><a href="/">Tag</a></div>
  924. <div id="tag"><a href="/">Tag</a></div>
  925. <div id="tag"><a href="/">Tag</a></div>
  926. <div id="tag"><a href="/">Tag</a></div>
  927. <div id="tag"><a href="/">Tag</a></div>
  928. <div id="tag"><a href="/">Tag</a></div>
  929. </div>
  930. <div id="saturn">
  931. <h3>Links</h3>
  932.  
  933. <div id="link"><a href="{text:link1 url}" title="{text:link1}">{text:link1}</a></div>
  934. <div id="link"><a href="{text:link1 ur2}" title="{text:link1}">{text:link2}</a></div>
  935. <div id="link"><a href="{text:link1 ur3}" title="{text:link1}">{text:link3}</a></div>
  936. <div id="link"><a href="{text:link1 ur4}" title="{text:link1}">{text:link4}</a></div>
  937. </div>
  938. <div id="uranus">
  939. <h3>Blogroll</h3>
  940.  
  941. <center>
  942. {block:Following}{block:Followed}<a target="_blank" href="{FollowedURL}" title="{FollowedTitle}"><img src="{FollowedPortraitURL-24}" /></a>{/block:Followed}{/block:Following}
  943. </center>
  944. </div>
  945. <div id="neptune">
  946. <h3>FAQ</h3>
  947.  
  948. <div id="q">Question?</div>
  949. <div id="a">Answer.</div>
  950.  
  951. <div id="q">Question?</div>
  952. <div id="a">Answer.</div>
  953.  
  954.  
  955. <div id="q">Question?</div>
  956. <div id="a">Answer.</div>
  957. </div>
  958. <div id="pluto">
  959. <center>
  960. <iframe frameborder="0" border="0" scrolling="no" width="300" height="250" allowtransparency="true" src="http://www.tumblr.com/ask_form/kittycatlou.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  961. </center>
  962. </div>
  963.  
  964. <div id="saturnsring"></div>
  965. <div id="uranusring"></div>
  966.  
  967. <div id="mercurystrack"></div>
  968. <div id="venustrack"></div>
  969. <div id="earthstrack"></div>
  970. <div id="marstrack"></div>
  971. <div id="jupiterstrack"></div>
  972. <div id="saturnstrack"></div>
  973. <div id="uranustrack"></div>
  974. <div id="neptunestrack"></div>
  975. <div id="plutostrack"></div>
  976.  
  977. <div id="credit"><a href="http://bsethemes.tumblr.com/">Theme</a></div>
  978.  
  979. </body>
  980. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement