API tools faq
paste
bsethemes

Castor and Pollux (annotated ver.)

bsethemes
Jun 5th, 2015
1,639
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.07 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><html><head>
  2. <!----
  3. _______ __ __ .____ __ __ .____ ____ _ _
  4. ' / | | / | | / / \ `. /
  5. | |___| |__. |\ /| |__. |,_-< `./
  6. | | | | | \/ | | | ` ,'
  7. / / / /----/ / / /----/ `----' _-'
  8.  
  9.  
  10.  
  11.  
  12. ____ _____ .____ _______ __ __ .____ __ __ .____ _____
  13. / \ ( / ' / | | / | | / (
  14. |,_-< `--. |__. | |___| |__. |\ /| |__. `--.
  15. | ` | | | | | | | \/ | | |
  16. `----' \___.' /----/ / / / /----/ / / /----/ \___.'
  17.  
  18.  
  19.  
  20. -don't change or remove credit
  21. -don't take bits of the code
  22. -don't claim theme as yours
  23. -for any questions, feedback or theme requests please don't hesitate to contanct me!!!
  24.  
  25. DON'T TOUCH ANYTHING THAT'S NOT ANNOTATED UNLESS YOU KNOW WHAT YOU'RE DOING
  26. ---->
  27.  
  28.  
  29. <title>Gemini Twins</title>
  30. <!--THE TITLE that shows in the upper tab-->
  31. <link rel="shortcut icon" href="http://38.media.tumblr.com/tumblr_m230z8YSMN1qfamg6.gif">
  32. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  33.  
  34.  
  35. <script type="text/javascript">
  36. WebFontConfig = {
  37. google: { families: [ 'Open+Sans+Condensed:300,300italic,700:latin' ] }
  38. };
  39. (function() {
  40. var wf = document.createElement('script');
  41. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  42. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  43. wf.type = 'text/javascript';
  44. wf.async = 'true';
  45. var s = document.getElementsByTagName('script')[0];
  46. s.parentNode.insertBefore(wf, s);
  47. })(); </script>
  48.  
  49. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  50. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  51. <script>
  52. (function($){
  53. $(document).ready(function(){
  54. $("a[title]").style_my_tooltips({
  55. tip_follows_cursor:true,
  56. tip_delay_time:90,
  57. tip_fade_speed:600,
  58. attribute:"title"
  59. });
  60. });
  61. })(jQuery);
  62. </script>
  63.  
  64.  
  65. <style type="text/css">
  66.  
  67.  
  68. ::-moz-selection {
  69. background: transparent; /*background selection color*/
  70. color:#14121D; /*text selection color*/
  71. }
  72.  
  73. ::selection {
  74. background: transparent; /*background selection color*/
  75. color:#14121D; /*text selection color (different browser)*/
  76. }
  77.  
  78.  
  79. ::-webkit-scrollbar {
  80. width: 5px;
  81. }
  82.  
  83. ::-webkit-scrollbar-track {
  84. background-color: transparent; /*scroll bar track*/
  85. border:2px solid #14121D; /*scroll bar borders color (I advise to make the same color as the scroll bar thumb, but you can delete it if you don't want it*/
  86. }
  87.  
  88. ::-webkit-scrollbar-thumb {
  89. height:auto;
  90. background-color:#14121D; /*scroll bar thumb color*/
  91. }
  92.  
  93. #s-m-t-tooltip {
  94. max-width:200px;
  95. margin:25px 20px 25px 20px;
  96. background:#14121D; /* tool tips color */
  97. color:#fff; /* tool tips text color */
  98. font-size:11px;
  99. line-height:13px;
  100. padding:3px 5px 4px 5px;
  101. opacity:.1;
  102. border: 1px solid #e5e5e5; /* tool tip border */
  103. -webkit-box-shadow: 3px 3px 0px -1px rgba(255,255,255,0.08);
  104. -moz-box-shadow: 3px 3px 0px -1px rgba(255,255,255,0.08);
  105. box-shadow: 3px 3px 0px -1px rgba(255,255,255,0.08);
  106. -webkit-transition: all 0.2s ease-out;
  107. -moz-transition: all 0.2s ease-out;
  108. transition: all 0.2s ease-out;
  109. z-index:999999999999999999999999999999999999;
  110. }
  111.  
  112.  
  113. body {
  114. overflow:hidden;
  115. font-family: 'Open Sans Condensed', sans-serif;
  116. letter-spacing:1px;
  117. font-size:12px; /*text size*/
  118. color:#a7a7a7; /*text color */
  119. background-color:#fff; /*background color*/
  120. background-image: url('http://s18.postimg.org/b3gp5df1l/the_night_sky.jpg'); /* backgrounds image*/
  121. background-attachment:fixed;
  122. background-size:cover;
  123. background-repeat:no-repeat;
  124. }
  125.  
  126.  
  127. a {
  128. color:#808080; /*links color*/
  129. font-style:italic; /*italiced links */
  130. text-decoration:none;
  131. -moz-transition-duration:0.5s
  132. -webkit-transition-duration:0.5s;
  133. -o-transition-duration:0.5s;
  134. }
  135.  
  136.  
  137. a:hover {
  138. color:#c0c0c0;/* hover color */
  139. text-decoration:none;
  140. -moz-transition-duration:0.5s;
  141. -webkit-transition-duration:0.5s;
  142. -o-transition-duration:0.5s;
  143. }
  144.  
  145. h3 {
  146. color:#a7a7a7; /*sections title color */
  147. text-align:left;
  148. text-decoration:underline;
  149. }
  150.  
  151. #line1 {
  152. position:absolute;
  153. width:1px;
  154. border-right:1px solid #fff; /*line color*/
  155. margin-top:39px;
  156. height:210px;
  157. margin-left:380px;
  158. -ms-transform: rotate(-10deg);
  159. -webkit-transform: rotate(-10deg);
  160. transform: rotate(-10deg);
  161. }
  162.  
  163. #line2 {
  164. position:absolute;
  165. height:530px;
  166. border-right:1px solid #fff; /*line color*/
  167. margin-top:-113px;
  168. margin-left:645px;
  169. -ms-transform: rotate(68deg);
  170. -webkit-transform: rotate(68deg);
  171. transform: rotate(68deg);
  172. }
  173.  
  174. #line3 {
  175. position:absolute;
  176. width:235px;
  177. border-top:1px solid #fff; /*line color*/
  178. margin-top:142px;
  179. margin-left:700px;
  180. -ms-transform: rotate(6deg);
  181. -webkit-transform: rotate(6deg);
  182. transform: rotate(6deg);
  183. }
  184.  
  185. #line4 {
  186. position:absolute;
  187. height:235px;
  188. border-right:1px solid #fff; /*line color*/
  189. margin-top:206px;
  190. margin-left:305px;
  191. -ms-transform: rotate(52deg);
  192. -webkit-transform: rotate(52deg);
  193. transform: rotate(52deg);
  194. }
  195.  
  196. #line5 {
  197. position:absolute;
  198. width:160px;
  199. border-top:1px solid #fff; /*line color*/
  200. margin-top:330px;
  201. margin-left:323px;
  202. -ms-transform: rotate(88deg);
  203. -webkit-transform: rotate(88deg);
  204. transform: rotate(88deg);
  205. }
  206.  
  207. #line6 {
  208. position:absolute;
  209. width:90px;
  210. border-top:1px solid #fff; /*line color*/
  211. margin-top:450px;
  212. margin-left:342px;
  213. -ms-transform: rotate(113deg);
  214. -webkit-transform: rotate(113deg);
  215. transform: rotate(113deg);
  216. }
  217.  
  218. #line7 {
  219. position:absolute;
  220. width:320px;
  221. border-top:1px solid #fff; /*line color*/
  222. margin-top:485px;
  223. margin-left:285px;
  224. -ms-transform: rotate(173deg);
  225. -webkit-transform: rotate(173deg);
  226. transform: rotate(173deg);
  227. }
  228.  
  229. #line8 {
  230. position:absolute;
  231. width:105px;
  232. border-top:1px solid #fff;/*line color*/
  233. margin-top:545px;
  234. margin-left:330px;
  235. -ms-transform: rotate(76deg);
  236. -webkit-transform: rotate(76deg);
  237. transform: rotate(76deg);
  238. }
  239.  
  240. #line9 {
  241. position:absolute;
  242. width:140px;
  243. border-top:1px solid #fff; /*line color*/
  244. margin-top:425px;
  245. margin-left:595px;
  246. -ms-transform: rotate(145deg);
  247. -webkit-transform: rotate(145deg);
  248. transform: rotate(145deg);
  249. }
  250.  
  251. #line10 {
  252. position:absolute;
  253. width:205px;
  254. border-top:1px solid #fff; /*line color*/
  255. margin-top:530px;
  256. margin-left:580px;
  257. -ms-transform: rotate(41deg);
  258. -webkit-transform: rotate(41deg);
  259. transform: rotate(41deg);
  260. }
  261.  
  262.  
  263. #line11 {
  264. position:absolute;
  265. width:340px;
  266. border-top:1px solid #fff; /*line color*/
  267. margin-top:345px;
  268. margin-left:720px;
  269. -ms-transform: rotate(116deg);
  270. -webkit-transform: rotate(116deg);
  271. transform: rotate(166deg);
  272. }
  273.  
  274. #line12 {
  275. position:absolute;
  276. width:380px;
  277. border-top:1px solid #fff; /*line color*/
  278. margin-top:525px;
  279. margin-left:740px;
  280. -ms-transform: rotate(76deg);
  281. -webkit-transform: rotate(76deg);
  282. transform: rotate(158deg);
  283. }
  284.  
  285. #circle1 {
  286. margin-top:30px;
  287. margin-left:358px;
  288. width:10px;
  289. height:10px;
  290. border-radius: 50%;
  291. background: #fff; /*circle color */
  292. position:absolute;
  293. overflow:hidden;
  294. -webkit-transition-duration:0.5s;
  295. -moz-transition-duration:0.5s;
  296. -ms-transition-duration:0.5s;
  297. -o-transition-duration:0.5s;
  298. transition-duration:0.5s;
  299. }
  300.  
  301. #circle1:hover {
  302. width:200px; /*box width */
  303. text-align:justify;
  304. overflow-y:auto;
  305. overflow-x:hidden;
  306. height:200px; /*box height */
  307. padding:10px;
  308. position:fixed;
  309. line-height:150%;
  310. border-radius:0%;
  311. border:3px solid #f0f0f0; /*box border*/
  312. -webkit-transition-duration:0.5s;
  313. -moz-transition-duration:0.5s;
  314. -ms-transition-duration:0.5s;
  315. -o-transition-duration:0.5s;
  316. transition-duration:0.5s;
  317. -webkit-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  318. -moz-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  319. box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  320. z-index:1;
  321. }
  322.  
  323. #circle2 {
  324. position:absolute;
  325. margin-top:245px;
  326. margin-left:395px;
  327. width:10px;
  328. height:10px;
  329. border-radius: 50%;
  330. background:#fff; /*circle color */
  331. -webkit-transition-duration:0.5s;
  332. -moz-transition-duration:0.5s;
  333. -ms-transition-duration:0.5s;
  334. -o-transition-duration:0.5s;
  335. transition-duration:0.5s;
  336. }
  337.  
  338. #circle2:hover {
  339. margin-top:200px;
  340. margin-left:350px;
  341. z-index:1;
  342. width:150px;
  343. height:150px;
  344. position:fixed;
  345. border-radius:50%;
  346. border:3px solid #f0f0f0; /*box border*/
  347. content:url('http://s27.postimg.org/54pzgmw83/Untitled_1.jpg'); /*profile pic, paste your photos url between '' also try to pic an a square pic*/
  348. }
  349.  
  350. #circle3 {
  351. position:absolute;
  352. margin-top:125px;
  353. margin-left:698px;
  354. font-size:14px;
  355. width:10px;
  356. height:10px;
  357. overflow:hidden;
  358. border-radius: 50%;
  359. background:#fff; /*circle color */
  360. -webkit-transition-duration:0.5s;
  361. -moz-transition-duration:0.5s;
  362. -ms-transition-duration:0.5s;
  363. -o-transition-duration:0.5s;
  364. transition-duration:0.5s;
  365. }
  366.  
  367. #circle3:hover {
  368. margin-top:90px;
  369. margin-left:600px;
  370. width:150px; /*box width */
  371. text-align:center;
  372. overflow-y:auto;
  373. overflow-x:hidden;
  374. height:150px; /*box height */
  375. padding:10px;
  376. position:fixed;
  377. line-height:500%;
  378. border-radius:0%;
  379. border:3px solid #f0f0f0; /*box border*/
  380. -webkit-transition-duration: .5s;
  381. -webkit-transition-duration:0.5s;
  382. -moz-transition-duration:0.5s;
  383. -ms-transition-duration:0.5s;
  384. -o-transition-duration:0.5s;
  385. transition-duration:0.5s;
  386. -webkit-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  387. -moz-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  388. box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  389. z-index:1;
  390. }
  391.  
  392. #circle3 h3 {
  393. margin-bottom:-100px;
  394. margin-top:-20px;
  395. }
  396.  
  397. #circle3 a {
  398. background:#a7a7a7;/*link background color (links section)*/
  399. color:#fff;/* links color (links section) */
  400. border:5px solid #c0c0c0; /*links border (links section)*/
  401. padding:10px;
  402. text-transform:uppercase;
  403. letter-spacing:2px;
  404. text-shadow: -1px -2px 1px rgba(0, 0, 0, 0.24);
  405. -webkit-transition-duration:0.5s;
  406. -moz-transition-duration:0.5s;
  407. -ms-transition-duration:0.5s;
  408. -o-transition-duration:0.5s;
  409. transition-duration:0.5s;
  410. }
  411.  
  412. #circle3 a:hover {
  413. font-size:15px;
  414. border-top:0px;
  415. border:3px solid #c0c0c0;/*links border on hover (links section)*/
  416. letter-spacing:10px;
  417. text-shadow: -1px -2px 1px rgba(0, 0, 0, 0.24);
  418. -webkit-transition-duration:0.5s;
  419. -moz-transition-duration:0.5s;
  420. -ms-transition-duration:0.5s;
  421. -o-transition-duration:0.5s;
  422. transition-duration:0.5s;
  423. }
  424.  
  425. #circle4 {
  426. position:absolute;
  427. margin-top:47px;
  428. margin-left:887px;
  429. width:10px;
  430. height:10px;
  431. border-radius: 50%;
  432. background:#fff; /*circle color */
  433. overflow:hidden;
  434. -webkit-transition-duration:0.5s;
  435. -moz-transition-duration:0.5s;
  436. -ms-transition-duration:0.5s;
  437. -o-transition-duration:0.5s;
  438. transition-duration:0.5s;
  439. }
  440.  
  441.  
  442. #circle4:hover {
  443. margin-top:20px;
  444. margin-left:800px;
  445. width:150px; /*box width */
  446. text-align:center;
  447. overflow-y:auto;
  448. overflow-x:hidden;
  449. height:150px; /*box height */
  450. padding:10px;
  451. position:fixed;
  452. line-height:500%;
  453. border-radius:0%;
  454. border:3px solid #f0f0f0; /*box border*/
  455. -webkit-transition-duration: .5s;
  456. -webkit-transition-duration:0.5s;
  457. -moz-transition-duration:0.5s;
  458. -ms-transition-duration:0.5s;
  459. -o-transition-duration:0.5s;
  460. transition-duration:0.5s;
  461. -webkit-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  462. -moz-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  463. box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  464. z-index:1;
  465. }
  466.  
  467. #circle4 h3 {
  468. margin-bottom:-100px;
  469. margin-top:-20px;
  470. }
  471.  
  472. #circle4 a {
  473. background:#a7a7a7;/*link background color (links section)*/
  474. color:#fff;/* links color (links section) */
  475. border:5px solid #c0c0c0; /*links border (links section)*/
  476. padding:10px;
  477. text-transform:uppercase;
  478. letter-spacing:2px;
  479. text-shadow: -1px -2px 1px rgba(0, 0, 0, 0.24);
  480. -webkit-transition-duration:0.5s;
  481. -moz-transition-duration:0.5s;
  482. -ms-transition-duration:0.5s;
  483. -o-transition-duration:0.5s;
  484. transition-duration:0.5s;
  485. }
  486.  
  487. #circle4 a:hover {
  488. font-size:15px;
  489. border:3px solid #c0c0c0;/*links border on hover (links section)*/
  490. letter-spacing:10px;
  491. text-shadow: -1px -2px 1px rgba(0, 0, 0, 0.24);
  492. -webkit-transition-duration:0.5s;
  493. -moz-transition-duration:0.5s;
  494. -ms-transition-duration:0.5s;
  495. -o-transition-duration:0.5s;
  496. transition-duration:0.5s;
  497. }
  498.  
  499. #circle5 {
  500. position:absolute;
  501. margin-top:150px;
  502. margin-left:930px;
  503. width:10px;
  504. height:10px;
  505. border-radius: 50%;
  506. background:#fff; /*circle color */
  507. overflow:hidden;
  508. -webkit-transition-duration: .5s;
  509. -webkit-transition-duration:0.5s;
  510. -moz-transition-duration:0.5s;
  511. -ms-transition-duration:0.5s;
  512. -o-transition-duration:0.5s;
  513. transition-duration:0.5s;
  514. }
  515.  
  516. #circle5:hover {
  517. margin-top:120px;
  518. margin-left:900px;
  519. width:150px; /*box width */
  520. text-align:center;
  521. overflow-y:auto;
  522. overflow-x:hidden;
  523. height:150px; /*box height */
  524. padding:10px;
  525. position:fixed;
  526. line-height:500%;
  527. border-radius:0%;
  528. border:3px solid #f0f0f0; /*box border*/
  529. -webkit-transition-duration: .5s;
  530. -webkit-transition-duration:0.5s;
  531. -moz-transition-duration:0.5s;
  532. -ms-transition-duration:0.5s;
  533. -o-transition-duration:0.5s;
  534. transition-duration:0.5s;
  535. -webkit-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  536. -moz-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  537. box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  538. z-index:1;
  539. }
  540.  
  541. #circle5 h3 {
  542. margin-bottom:-100px;
  543. margin-top:-20px;
  544. }
  545.  
  546. #circle5 a {
  547. background:#a7a7a7;/*link background color (links section)*/
  548. color:#fff;/* links color (links section) */
  549. border:5px solid #c0c0c0; /*links border (links section)*/
  550. padding:10px;
  551. text-transform:uppercase;
  552. letter-spacing:2px;
  553. text-shadow: -1px -2px 1px rgba(0, 0, 0, 0.24);
  554. -webkit-transition-duration:0.5s;
  555. -moz-transition-duration:0.5s;
  556. -ms-transition-duration:0.5s;
  557. -o-transition-duration:0.5s;
  558. transition-duration:0.5s;
  559. }
  560.  
  561. #circle5 a:hover {
  562. font-size:15px;
  563. border:3px solid #c0c0c0;/*links border on hover (links section)*/
  564. letter-spacing:10px;
  565. text-shadow: -1px -2px 1px rgba(0, 0, 0, 0.24);
  566. -webkit-transition-duration:0.5s;
  567. -moz-transition-duration:0.5s;
  568. -ms-transition-duration:0.5s;
  569. -o-transition-duration:0.5s;
  570. transition-duration:0.5s;
  571. }
  572.  
  573. #circle6 {
  574. position:absolute;
  575. margin-top:390px;
  576. margin-left:210px;
  577. width:10px;
  578. height:10px;
  579. border-radius: 50%;
  580. background:#fff; /*circle color */
  581. overflow:hidden;
  582. -webkit-transition-duration:0.5s;
  583. -moz-transition-duration:0.5s;
  584. -ms-transition-duration:0.5s;
  585. -o-transition-duration:0.5s;
  586. transition-duration:0.5s;
  587. }
  588.  
  589. #circle6:hover {
  590. z-index:1;
  591. width:150px; /*box width */
  592. height:72px; /*box height */
  593. padding:10px;
  594. position:fixed;
  595. line-height:150%;
  596. border-radius:0%;
  597. overflow-y:auto;
  598. overflow-x:hidden;
  599. font-style:italic;
  600. text-align:justify;
  601. -webkit-transition-duration:0.5s;
  602. -moz-transition-duration:0.5s;
  603. -ms-transition-duration:0.5s;
  604. -o-transition-duration:0.5s;
  605. transition-duration:0.5s;
  606. border:3px solid #f0f0f0; /*box border*/
  607. -webkit-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  608. -moz-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  609. box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  610. }
  611.  
  612. #circle7 {
  613. position:absolute;
  614. margin-top:405px;
  615. margin-left:400px;
  616. width:10px;
  617. height:10px;
  618. border-radius: 50%;
  619. background:#fff; /*circle color */
  620. overflow:hidden;
  621. -webkit-transition-duration:0.5s;
  622. -moz-transition-duration:0.5s;
  623. -ms-transition-duration:0.5s;
  624. -o-transition-duration:0.5s;
  625. transition-duration:0.5s;
  626. }
  627.  
  628. #circle7:hover {
  629. margin-top:340px;
  630. width:200px; /*box width */
  631. text-align:justify;
  632. overflow-y:auto;
  633. overflow-x:hidden;
  634. height:200px; /*box height */
  635. text-transform:uppercase;
  636. padding:10px;
  637. text-align:center;
  638. letter-spacing:5px;
  639. position:fixed;
  640. line-height:200%;
  641. border-radius:0%;
  642. border:3px solid #f0f0f0; /*box border*/
  643. -webkit-transition-duration:0.5s;
  644. -moz-transition-duration:0.5s;
  645. -ms-transition-duration:0.5s;
  646. -o-transition-duration:0.5s;
  647. transition-duration:0.5s;
  648. -webkit-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  649. -moz-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  650. box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  651. z-index:1;
  652. }
  653.  
  654. #circle7 h3 {
  655. background:#a7a7a7; /* tags title background */
  656. color:#fff; /*tags title text */
  657. letter-spacing:3px;
  658. text-align:center;
  659. text-decoration:none;
  660. }
  661.  
  662. #circle7 a {
  663. border-bottom:1px solid #a7a7a7; /*tags bottom border */
  664. -webkit-transition-duration:0.5s;
  665. -moz-transition-duration:0.5s;
  666. -ms-transition-duration:0.5s;
  667. -o-transition-duration:0.5s;
  668. transition-duration:0.5s;
  669. }
  670.  
  671. #circle7 a:hover {
  672. letter-spacing:7px;
  673. border-bottom:0px;
  674. -webkit-transition-duration:0.5s;
  675. -moz-transition-duration:0.5s;
  676. -ms-transition-duration:0.5s;
  677. -o-transition-duration:0.5s;
  678. transition-duration:0.5s;
  679. }
  680.  
  681. #circle8 {
  682. position:absolute;
  683. margin-top:490px;
  684. margin-left:365px;
  685. width:10px;
  686. height:10px;
  687. border-radius: 50%;
  688. background:#fff; /*circle color */
  689. overflow:hidden;
  690. -webkit-transition-duration:0.5s;
  691. -moz-transition-duration:0.5s;
  692. -ms-transition-duration:0.5s;
  693. -o-transition-duration:0.5s;
  694. transition-duration:0.5s;
  695. }
  696.  
  697. #circle8:hover {
  698. margin-top:300px;
  699. width:200px; /*box width */
  700. text-align:justify;
  701. overflow-y:auto;
  702. overflow-x:hidden;
  703. height:200px;
  704. text-transform:uppercase;
  705. padding:10px;
  706. text-align:center;
  707. letter-spacing:5px;
  708. position:fixed;
  709. line-height:200%;
  710. border-radius:0%;
  711. border:3px solid #f0f0f0; /*box border*/
  712. -webkit-transition-duration:0.5s;
  713. -moz-transition-duration:0.5s;
  714. -ms-transition-duration:0.5s;
  715. -o-transition-duration:0.5s;
  716. transition-duration:0.5s;
  717. -webkit-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  718. -moz-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  719. box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  720. z-index:1;
  721. }
  722.  
  723. #circle8 h3 {
  724. background:#a7a7a7; /*tags title background */
  725. color:#fff; /*tags title text */
  726. letter-spacing:3px;
  727. text-align:center;
  728. text-decoration:none;
  729. }
  730.  
  731. #circle8 a {
  732. border-bottom:1px solid #a7a7a7; /*tags bottom border */
  733. -webkit-transition-duration:0.5s;
  734. -moz-transition-duration:0.5s;
  735. -ms-transition-duration:0.5s;
  736. -o-transition-duration:0.5s;
  737. transition-duration:0.5s;
  738. }
  739.  
  740. #circle8 a:hover {
  741. letter-spacing:7px;
  742. border-bottom:0px;
  743. -webkit-transition-duration:0.5s;
  744. -moz-transition-duration:0.5s;
  745. -ms-transition-duration:0.5s;
  746. -o-transition-duration:0.5s;
  747. transition-duration:0.5s;
  748. }
  749.  
  750. #circle9 {
  751. position:absolute;
  752. margin-top:500px;
  753. margin-left:280px;
  754. width:10px;
  755. height:10px;
  756. border-radius: 50%;
  757. background:#fff; /*circle color */
  758. overflow:hidden;
  759. -webkit-transition-duration:0.5s;
  760. -moz-transition-duration:0.5s;
  761. -ms-transition-duration:0.5s;
  762. -o-transition-duration:0.5s;
  763. transition-duration:0.5s;
  764. }
  765.  
  766. #circle9:hover {
  767. margin-top:350px;
  768. width:200px; /*box width */
  769. text-align:justify;
  770. overflow-y:auto;
  771. overflow-x:hidden;
  772. height:200px; /*box height */
  773. text-transform:uppercase;
  774. padding:10px;
  775. text-align:center;
  776. letter-spacing:5px;
  777. position:fixed;
  778. line-height:200%;
  779. border-radius:0%;
  780. border:3px solid #f0f0f0; /*box border*/
  781. -webkit-transition-duration:0.5s;
  782. -moz-transition-duration:0.5s;
  783. -ms-transition-duration:0.5s;
  784. -o-transition-duration:0.5s;
  785. transition-duration:0.5s;
  786. -webkit-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  787. -moz-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  788. box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  789. z-index:1;
  790. }
  791.  
  792. #circle9 h3 {
  793. background:#a7a7a7; /*tags title background*/
  794. color:#fff; /*tags title text */
  795. letter-spacing:3px;
  796. text-align:center;
  797. text-decoration:none;
  798. }
  799.  
  800. #circle9 a {
  801. border-bottom:1px solid #a7a7a7; /*tags bottom border */
  802. -webkit-transition-duration:0.5s;
  803. -moz-transition-duration:0.5s;
  804. -ms-transition-duration:0.5s;
  805. -o-transition-duration:0.5s;
  806. transition-duration:0.5s;
  807. }
  808.  
  809. #circle9 a:hover {
  810. letter-spacing:7px;
  811. border-bottom:0px;
  812. -webkit-transition-duration:0.5s;
  813. -moz-transition-duration:0.5s;
  814. -ms-transition-duration:0.5s;
  815. -o-transition-duration:0.5s;
  816. transition-duration:0.5s;
  817. }
  818.  
  819. #circle10 {
  820. position:absolute;
  821. margin-top:590px;
  822. margin-left:390px;
  823. width:10px;
  824. height:10px;
  825. border-radius: 50%;
  826. background:#fff; /*circle color */
  827. overflow:hidden;
  828. -webkit-transition-duration:0.5s;
  829. -moz-transition-duration:0.5s;
  830. -ms-transition-duration:0.5s;
  831. -o-transition-duration:0.5s;
  832. transition-duration:0.5s;
  833. }
  834.  
  835. #circle10:hover {
  836. margin-top:380px;
  837. width:200px; /*box width */
  838. text-align:justify;
  839. overflow-y:auto;
  840. overflow-x:hidden;
  841. height:200px; /*box height */
  842. text-transform:uppercase;
  843. padding:10px;
  844. text-align:center;
  845. letter-spacing:5px;
  846. position:fixed;
  847. line-height:200%;
  848. border-radius:0%;
  849. border:3px solid #f0f0f0; /*box border*/
  850. -webkit-transition-duration:0.5s;
  851. -moz-transition-duration:0.5s;
  852. -ms-transition-duration:0.5s;
  853. -o-transition-duration:0.5s;
  854. transition-duration:0.5s;
  855. -webkit-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  856. -moz-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  857. box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  858. z-index:1;
  859. }
  860.  
  861. #circle10 h3 {
  862. background:#a7a7a7; /*tags title background */
  863. color:#fff; /*tags title text */
  864. letter-spacing:3px;
  865. text-align:center;
  866. text-decoration:none;
  867. }
  868.  
  869. #circle10 a {
  870. border-bottom:1px solid #a7a7a7; /*tags bottom border */
  871. -webkit-transition-duration:0.5s;
  872. -moz-transition-duration:0.5s;
  873. -ms-transition-duration:0.5s;
  874. -o-transition-duration:0.5s;
  875. transition-duration:0.5s;
  876. }
  877.  
  878. #circle10 a:hover {
  879. letter-spacing:7px;
  880. border-bottom:0px;
  881. -webkit-transition-duration:0.5s;
  882. -moz-transition-duration:0.5s;
  883. -ms-transition-duration:0.5s;
  884. -o-transition-duration:0.5s;
  885. transition-duration:0.5s;
  886. }
  887.  
  888. #circle11 {
  889. position:absolute;
  890. margin-top:460px;
  891. margin-left:600px;
  892. width:10px;
  893. height:10px;
  894. border-radius: 50%;
  895. background:#fff; /*circle color */
  896. overflow:hidden;
  897. -webkit-transition-duration:0.5s;
  898. -moz-transition-duration:0.5s;
  899. -ms-transition-duration:0.5s;
  900. -o-transition-duration:0.5s;
  901. transition-duration:0.5s;
  902. }
  903.  
  904. #circle11:hover {
  905. margin-top:300px;
  906. width:250px; /*box width */
  907. overflow-y:auto;
  908. overflow-x:hidden;
  909. height:250px; /*box height */
  910. padding:10px;
  911. position:fixed;
  912. line-height:150%;
  913. border-radius:0%;
  914. border:3px solid #f0f0f0; /*box border*/
  915. z-index:1;
  916. -webkit-transition-duration:0.5s;
  917. -moz-transition-duration:0.5s;
  918. -ms-transition-duration:0.5s;
  919. -o-transition-duration:0.5s;
  920. transition-duration:0.5s;
  921. -webkit-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  922. -moz-box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  923. box-shadow: 6px 6px 0px -2px rgba(255,255,255,0.5);
  924. }
  925.  
  926. #circle11 img {
  927. border:2px solid #f0f0f0; /*blogroll images border*/
  928. border-radius:50%;
  929. -webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.06);
  930. -moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.06);
  931. box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.06);
  932. }
  933.  
  934. #circle12 {
  935. position:absolute;
  936. margin-top:380px;
  937. margin-left:720px;
  938. width:10px;
  939. height:10px;
  940. border-radius: 50%;
  941. background:#fff; /*circle color */
  942. -webkit-transition-duration:0.5s;
  943. -moz-transition-duration:0.5s;
  944. -ms-transition-duration:0.5s;
  945. -o-transition-duration:0.5s;
  946. transition-duration:0.5s;
  947. }
  948.  
  949. #circle12:hover {
  950. margin-top:375px;
  951. margin-left:715;
  952. width:15px;
  953. height:15px;
  954. -webkit-transition-duration:0.5s;
  955. -moz-transition-duration:0.5s;
  956. -ms-transition-duration:0.5s;
  957. -o-transition-duration:0.5s;
  958. transition-duration:0.5s;
  959. }
  960.  
  961. #circle13 {
  962. position:absolute;
  963. margin-top:300px;
  964. margin-left:1050px;
  965. width:10px;
  966. height:10px;
  967. border-radius: 50%;
  968. background:#fff; /*circle color */
  969. -webkit-transition-duration:0.5s;
  970. -moz-transition-duration:0.5s;
  971. -ms-transition-duration:0.5s;
  972. -o-transition-duration:0.5s;
  973. transition-duration:0.5s;
  974. }
  975.  
  976. #circle13:hover {
  977. width:15px;
  978. height:15px;
  979. -webkit-transition-duration:0.5s;
  980. -moz-transition-duration:0.5s;
  981. -ms-transition-duration:0.5s;
  982. -o-transition-duration:0.5s;
  983. transition-duration:0.5s;
  984. }
  985.  
  986. #circle14 {
  987. position:absolute;
  988. margin-top:590px;
  989. margin-left:750px;
  990. width:10px;
  991. height:10px;
  992. border-radius: 50%;
  993. background:#fff; /*circle color */
  994. -webkit-transition-duration:0.5s;
  995. -moz-transition-duration:0.5s;
  996. -ms-transition-duration:0.5s;
  997. -o-transition-duration:0.5s;
  998. transition-duration:0.5s;
  999. }
  1000.  
  1001. #circle14:hover {
  1002. margin-top:587px;
  1003. width:15px;
  1004. height:15px;
  1005. -webkit-transition-duration:0.5s;
  1006. -moz-transition-duration:0.5s;
  1007. -ms-transition-duration:0.5s;
  1008. -o-transition-duration:0.5s;
  1009. transition-duration:0.5s;
  1010. }
  1011.  
  1012. #circle15 {
  1013. position:absolute;
  1014. margin-top:450px;
  1015. margin-left:1100px;
  1016. width:10px;
  1017. height:10px;
  1018. border-radius: 50%;
  1019. background:#fff; /*circle color */
  1020. -webkit-transition-duration:0.5s;
  1021. -moz-transition-duration:0.5s;
  1022. -ms-transition-duration:0.5s;
  1023. -o-transition-duration:0.5s;
  1024. transition-duration:0.5s;
  1025. }
  1026.  
  1027. #circle15:hover {
  1028. margin-top:447px;
  1029. width:15px;
  1030. height:15px;
  1031. -webkit-transition-duration:0.5s;
  1032. -moz-transition-duration:0.5s;
  1033. -ms-transition-duration:0.5s;
  1034. -o-transition-duration:0.5s;
  1035. transition-duration:0.5s;
  1036. }
  1037.  
  1038. #title {
  1039. color:#fff; /*titles color */
  1040. position:absolute;
  1041. margin-top:300px;
  1042. margin-left:500px;
  1043. font-size:20px;
  1044. font-weight:normal;
  1045. font-style:italic;
  1046. font-family: 'Open Sans Condensed', sans-serif;
  1047. letter-spacing:5px;
  1048. -webkit-transition-duration:0.5s;
  1049. -moz-transition-duration:0.5s;
  1050. -ms-transition-duration:0.5s;
  1051. -o-transition-duration:0.5s;
  1052. transition-duration:0.5s;
  1053. }
  1054.  
  1055. #title:hover {
  1056. font-weight:bold;
  1057. letter-spacing:10px;
  1058. border-bottom:3px solid #fff;
  1059. -webkit-transition-duration:0.5s;
  1060. -moz-transition-duration:0.5s;
  1061. -ms-transition-duration:0.5s;
  1062. -o-transition-duration:0.5s;
  1063. transition-duration:0.5s;
  1064. }
  1065.  
  1066.  
  1067. #credit {
  1068. position:fixed;
  1069. right:10px;
  1070. bottom:15px;
  1071. }
  1072.  
  1073. #credit a {
  1074. font-style:italic;
  1075. letter-spacing:7px;
  1076. border:3px solid #fff;
  1077. padding:4px;
  1078. background:#a7a7a7;
  1079. color:#fff;
  1080. -webkit-transition-duration:0.5s;
  1081. -moz-transition-duration:0.5s;
  1082. -ms-transition-duration:0.5s;
  1083. -o-transition-duration:0.5s;
  1084. transition-duration:0.5s;
  1085. }
  1086.  
  1087. #credit a:hover {
  1088. letter-spacing:4px;
  1089. border:1px solid #fff;
  1090. -webkit-transition-duration:0.5s;
  1091. -moz-transition-duration:0.5s;
  1092. -ms-transition-duration:0.5s;
  1093. -o-transition-duration:0.5s;
  1094. transition-duration:0.5s;
  1095. }
  1096.  
  1097. </style>
  1098. </head>
  1099. <body>
  1100. <!--TITLE-->
  1101. <a href="/"><h1><div id="title">Gemini Twins</div></h1></a>
  1102.  
  1103.  
  1104. <!--ABOUT SECTION-->
  1105. <div id="circle1">
  1106. <h3>About</h3>
  1107.  
  1108. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel felis at metus dignissim eleifend. Mauris vestibulum, lacus vitae mollis scelerisque, dolor massa ultrices magna, non vestibulum tellus risus sit amet est. Suspendisse auctor pretium erat non pellentesque. Etiam ut dui odio. Nullam accumsan rhoncus ex. Pellentesque hendrerit dolor magna, at fermentum tortor fermentum in. Suspendisse euismod odio eget eros laoreet, at eleifend ex lacinia. Pellentesque nec mauris sed lacus malesuada tempus id a risus.
  1109. <b>Bold</b> <em>Italic</em> <q>Quote.</q>
  1110. </div>
  1111. <!--END ABOUT SECTION-->
  1112.  
  1113.  
  1114. <div id="circle2">
  1115.  
  1116. <!--TO EDIT THE PICTURE SCROLL TILL YOU FIND #circle2:hover
  1117. EDIT THIS content:url('PUT YOUR LINK HERE')-->
  1118.  
  1119. </div>
  1120.  
  1121.  
  1122.  
  1123. <!--LINKS SECTIONS-->
  1124. <div id="circle3">
  1125. <h3>Links</h3><br>
  1126.  
  1127. <a href="/" title="link">link</a><br>
  1128. <a href="/" title="link">link</a><br>
  1129. <a href="/" title="link">link</a><br>
  1130. <a href="/" title="link">link</a>
  1131. <!--DON'T FORGET TO ADD <br><br><br> AFTER THE LINKS CLOSING TAG-->
  1132. </div>
  1133. <div id="circle4">
  1134. <h3>Links</h3><br>
  1135.  
  1136. <a href="/" title="link">link</a><br>
  1137. <a href="/" title="link">link</a><br>
  1138. <a href="/" title="link">link</a><br>
  1139. <a href="/" title="link">link</a>
  1140. </div>
  1141. <div id="circle5">
  1142.  
  1143. <h3>Links</h3><br>
  1144.  
  1145. <a href="/" title="link">link</a><br>
  1146. <a href="/" title="link">link</a><br>
  1147. <a href="/" title="link">link</a><br>
  1148. <a href="/" title="link">link</a>
  1149. </div>
  1150. <!--END LINK SECTIONS-->
  1151.  
  1152.  
  1153.  
  1154. <!--QUOTE-->
  1155. <div id="circle6">
  1156. <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel felis at metus dignissim eleifend.</q>
  1157. </div>
  1158. <!--END QUOTE SECTION-->
  1159.  
  1160.  
  1161.  
  1162. <!--TAGS SECTIONS-->
  1163. <div id="circle7">
  1164. <h3>Tags Section 1</h3>
  1165.  
  1166. <a href="/">tag</a><br>
  1167. <a href="/">tag</a><br>
  1168. <a href="/">tag</a><br>
  1169. <a href="/">tag</a><br>
  1170. <a href="/">tag</a><br>
  1171. <a href="/">tag</a><br>
  1172. <a href="/">tag</a><br>
  1173. <a href="/">tag</a><br>
  1174. <a href="/">tag</a>
  1175. </div>
  1176. <div id="circle8">
  1177. <h3>Tags Section 2</h3>
  1178.  
  1179. <a href="/">tag</a><br>
  1180. <a href="/">tag</a><br>
  1181. <a href="/">tag</a><br>
  1182. <a href="/">tag</a><br>
  1183. <a href="/">tag</a><br>
  1184. <a href="/">tag</a><br>
  1185. <a href="/">tag</a><br>
  1186. <a href="/">tag</a><br>
  1187. <a href="/">tag</a>
  1188. </div>
  1189. <div id="circle9">
  1190. <h3>Tags Section 3</h3>
  1191.  
  1192. <a href="/">tag</a><br>
  1193. <a href="/">tag</a><br>
  1194. <a href="/">tag</a><br>
  1195. <a href="/">tag</a><br>
  1196. <a href="/">tag</a><br>
  1197. <a href="/">tag</a><br>
  1198. <a href="/">tag</a><br>
  1199. <a href="/">tag</a><br>
  1200. <a href="/">tag</a>
  1201. </div>
  1202. <div id="circle10">
  1203. <h3>Tags Section 4</h3>
  1204.  
  1205. <a href="/">tag</a><br>
  1206. <a href="/">tag</a><br>
  1207. <a href="/">tag</a><br>
  1208. <a href="/">tag</a><br>
  1209. <a href="/">tag</a><br>
  1210. <a href="/">tag</a><br>
  1211. <a href="/">tag</a><br>
  1212. <a href="/">tag</a><br>
  1213. <a href="/">tag</a>
  1214. </div>
  1215. <!--END TAG SECTIONS-->
  1216.  
  1217.  
  1218.  
  1219. <!--BLOGROLL SECTION-->
  1220. <div id="circle11">
  1221. {block:Following}{block:Followed}
  1222. <a target="_blank" href="{FollowedURL}" title="{FollowedName}">
  1223. <img border="0" style="padding:0px;" src="{FollowedPortraitURL-40}" /></a>
  1224. {/block:Followed}{/block:Following}
  1225. </div>
  1226. <!--END BLOGROLL SECTION-->
  1227.  
  1228.  
  1229.  
  1230. <!--DIRECT LINKS SECTION-->
  1231. <a href="/" title="back"><div id="circle12"></div></a>
  1232.  
  1233. <a href="http://tumblr.com/" title="dash"><div id="circle13"></div></a>
  1234.  
  1235. <a href="/" title="link"><div id="circle14"></div></a>
  1236.  
  1237. <!--END DIRECT LINKS SECTION-->
  1238.  
  1239.  
  1240. <!--DONT TOUCH THIS-->
  1241. <div id="line1"></div>
  1242. <div id="line2"></div>
  1243. <div id="line3"></div>
  1244. <div id="line4"></div>
  1245. <div id="line5"></div>
  1246. <div id="line6"></div>
  1247. <div id="line7"></div>
  1248. <div id="line8"></div>
  1249. <div id="line9"></div>
  1250. <div id="line10"></div>
  1251. <div id="line11"></div>
  1252. <div id="line12"></div>
  1253.  
  1254. <a href="http://bsethemes.tumblr.com/" title="credit"><div id="circle15"></div></a>
  1255.  
  1256. <div id="credit"><a href="http://bsethemes.tumblr.com/">Credit</a></div>
  1257.  
  1258. </body>
  1259. </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!