API tools faq
paste
thisisnotras

ELIANA 2/11/16

thisisnotras
Feb 11th, 2016
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.21 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2.  
  3. @import url(//fonts.googleapis.com/css?family=Press+Start+2P);
  4.  
  5. .pfor{display: none;}
  6. #profile{background: transparent; border: 0px;}
  7.  
  8. @font-face {
  9. src: url('https://dl.dropboxusercontent.com/u/4556289/spacefr.ttf');
  10. font-family: 'buttonfont';
  11. }
  12.  
  13. #whole{position:absolute;
  14. top: 0px;
  15. left: 0px;
  16. right: 0px;
  17. bottom: 0px;
  18. overflow: hidden;
  19. background-image:url(http://i68.tinypic.com/52hmpc.jpg);
  20. }
  21.  
  22. ::-webkit-scrollbar {
  23. width: 4px;
  24. background-color: #000000;
  25. }
  26.  
  27.  
  28. ::-webkit-scrollbar-thumb {
  29. border-radius: 0px;
  30. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  31. background-color: #8D627E;
  32. }
  33.  
  34. #mainhost{
  35. position: absolute;
  36. top: 0px;
  37. right: 100px;
  38. bottom: 0px;
  39. margin: auto;
  40. height: 600px;
  41. width: 600px;
  42. border: 0px solid black;
  43. background-image:url(http://i64.tinypic.com/r75ahh.jpg);
  44. background-repeat: no-repeat;
  45. background-size: auto 100%;
  46. background-position: center;
  47. }
  48.  
  49. #centerspin{
  50. position: absolute;
  51. top: 0px;
  52. left: 0px;
  53. right: 0px;
  54. bottom: 0px;
  55. margin: auto;
  56. border: 0px solid black;
  57. height: 0px;
  58. width: 0px;
  59. overflow: none;
  60. border-radius: 90px 90px 90px 90px;
  61. -webkit-animation: astral 30s infinite;
  62. animation: astral 30s infinite;
  63. -webkit-animation-timing-function: linear;
  64. animation-timing-function: linear;
  65. }
  66.  
  67. #planetlink1,#planetlink2,#planetlink3,
  68. #planetlink4,#planetlink5{
  69. position: absolute;
  70. height: 30px;
  71. width: 30px;
  72. border-radius: 90px 90px 90px 90px;
  73. box-shadow: 1px 1px 10px black;
  74. background-size: auto 130%;
  75. background-position: center;
  76. border: 0px;
  77. }
  78.  
  79. #planetlink1{
  80. top: -300px;
  81. left: 0px;
  82. background-image:url(http://i68.tinypic.com/f5etv.jpg);
  83. }
  84.  
  85. #planetlink2{
  86. top: -75px;
  87. right:-300px;
  88. background-image:url(http://i64.tinypic.com/2dw5fk6.jpg);
  89. }
  90.  
  91. #planetlink3{
  92. top: 250px;
  93. right: -200px;
  94. background-image:url(http://i65.tinypic.com/2ut6k1v.jpg);
  95. }
  96.  
  97. #planetlink4{
  98. top: 250px;
  99. right: 200px;
  100. background-image:url(http://i63.tinypic.com/125p2j6.jpg);
  101. }
  102.  
  103. #planetlink5{
  104. top: -75px;
  105. right: 300px;
  106. background-image:url(http://i65.tinypic.com/25i2lx1.jpg);
  107. }
  108.  
  109. #centerspin:hover{
  110. transition: all 1s;
  111. -webkit-transition: all 1s;
  112. animation-play-state: paused;
  113. -webkit-animation-play-state: paused;
  114. }
  115.  
  116. #centerspin:hover .titlediv{
  117. transition: all 1s;
  118. -webkit-transition: all 1s;
  119. animation-play-state: paused;
  120. -webkit-animation-play-state: paused;
  121. }
  122.  
  123. @-webkit-keyframes astral{
  124. 0%{transform:rotate(0deg);}
  125. 100%{transform:rotate(360deg);}
  126. }
  127.  
  128. @keyframes astral{
  129. 0%{transform:rotate(0deg);}
  130. 100%{transform:rotate(360deg);}
  131. }
  132.  
  133. .titlediv{
  134. position: absolute;
  135. top: 30px;
  136. height: 20px;
  137. width: 130px;
  138. left: 0px;
  139. right: 0px;
  140. margin: auto;
  141. border: 0px solid red;
  142. -webkit-animation: astralrev 30s infinite;
  143. animation: astralrev 30s infinite;
  144. -webkit-animation-timing-function: linear;
  145. animation-timing-function: linear;
  146. overflow: hidden;
  147. }
  148.  
  149.  
  150. #verybasic{z-index: 2;}
  151. #basicone, #basictwo, #basicthree, #basicfour, #basicfive{
  152. z-index: 1;
  153. -webkit-transition: all 1s;
  154. transition: all 1s;
  155. opacity: 0;
  156. }
  157.  
  158. #planetlink1:hover ~ #basicone, #planetlink2:hover ~ #basictwo,
  159. #planetlink3:hover ~ #basicthree, #planetlink4:hover ~ #basicfour,
  160. #planetlink5:hover ~ #basicfive{
  161. z-index: 3;
  162. opacity: 1;
  163. }
  164.  
  165. #planetlink1:hover ~ #verybasic, #planetlink2:hover ~ #verybasic,
  166. #planetlink3:hover ~ #verybasic, #planetlink4:hover ~ #verybasic,
  167. #planetlink5:hover ~ #verybasic{
  168. opacity: 0;
  169. }
  170.  
  171.  
  172. .innerdiv{
  173. position: absolute;
  174. height:80%;
  175. width: 95%;
  176. border: 2px dashed silver;
  177. font-family: 'buttonfont', 'Press Start 2P', Times;
  178. font-size: 12pt;
  179. color: silver;
  180. z-index: 1;
  181. text-align: center;
  182. }
  183.  
  184. #backgroundfiller{
  185. position: absolute;
  186. opacity: .8;
  187. background: black;
  188. left: 1px;
  189. top: 1px;
  190. right: 1px;
  191. bottom: 1px;
  192.  
  193. }
  194.  
  195. @-webkit-keyframes astralrev{
  196. 0%{transform:rotate(0deg);}
  197. 100%{transform:rotate(-360deg);}
  198. }
  199.  
  200. @keyframes astralrev{
  201. 0%{transform:rotate(0deg);}
  202. 100%{transform:rotate(-360deg);}
  203. }
  204.  
  205. #titleblocker{
  206. position: absolute;
  207. border: 1px solid black;
  208. right: 200px;
  209. top: 0px;
  210. bottom: 0px;
  211. margin: auto;
  212. height: 300px;
  213. width: 400px;
  214. z-index: 2;
  215. opacity: 0;
  216. }
  217.  
  218. /* Content Area -- START */
  219. #contentcontainer{
  220. position: absolute;
  221. height: 500px;
  222. width: 500px;
  223. border: 0px solid green;
  224. right: 750px;
  225. top: 0px;
  226. bottom: 0px;
  227. margin: auto;
  228. opacity: 0;
  229. -webkit-transition: all 1s;
  230. transition: all 1s;
  231. }
  232.  
  233. #headerdiv{
  234. position: absolute;
  235. top: 10px;
  236. left: 0px;
  237. right: 0px;
  238. margin: auto;
  239. height: 30px;
  240. width: 150px;
  241. border-radius: 5px 5px 5px 5px;
  242. border: 2px dashed silver;
  243. overflow: hidden;
  244. }
  245.  
  246. #bodydiv{
  247. position: absolute;
  248. top: 70px;
  249. left: 0px;
  250. right: 0px;
  251. margin: auto;
  252. height: 400px;
  253. width: 300px;
  254. border: 2px dashed silver;
  255. overflow: hidden;
  256. }
  257.  
  258. #contentcontainer #backgroundfiller{
  259. opacity: .4;
  260. z-index: 0;
  261. }
  262.  
  263. .selectheader{
  264. position: absolute;
  265. height: 100%;
  266. width: 100%;
  267. font-family:'buttonfont';
  268. font-size: 13pt;
  269. letter-spacing: 5px;
  270. color: silver;
  271. box-sizing: border-box;
  272. text-align: center;
  273. padding-top: 4px;
  274. }
  275.  
  276. .selectbody{
  277. position: absolute;
  278. height: 100%;
  279. width: 99%;
  280. font-family:'buttonfont';
  281. font-size: 10pt;
  282. letter-spacing: 3px;
  283. color: white;
  284. box-sizing: border-box;
  285. text-align: center;
  286. padding-top: 4px;
  287. padding-left: 15px;
  288. text-align: left;
  289. overflow: auto;
  290. paddingleft: 2px;
  291. }
  292.  
  293. #firstheader, #firstbody,
  294. #secondheader, #secondbody,
  295. #thirdheader, #thirdbody,
  296. #fourthheader, #fourthbody,
  297. #fifthheader, #fifthbody{
  298. opacity: 0;
  299. z-index: 0;
  300. -webkit-transition: all 1s;
  301. transition: all 1s;
  302. }
  303.  
  304. #firstdiv:target #contentcontainer,
  305. #seconddiv:target #contentcontainer,
  306. #thirddiv:target #contentcontainer,
  307. #fourthdiv:target #contentcontainer,
  308. #fifthdiv:target #contentcontainer{
  309. opacity: 1;
  310. }
  311.  
  312. #firstdiv:target #firstheader,
  313. #firstdiv:target #firstbody,
  314. #seconddiv:target #secondheader,
  315. #seconddiv:target #secondbody,
  316. #thirddiv:target #thirdheader,
  317. #thirddiv:target #thirdbody,
  318. #fourthdiv:target #fourthheader,
  319. #fourthdiv:target #fourthbody,
  320. #fifthdiv:target #fifthheader,
  321. #fifthdiv:target #fifthbody{
  322. z-index: 2;
  323. opacity: 1;
  324. }
  325.  
  326. /* Content Area -- END */
  327.  
  328. /* MUSIC AREA -- START */
  329.  
  330. #musicholder{
  331. position: fixed;
  332. left: 10px;
  333. bottom: 10px;
  334. height: 30px;
  335. width: 180px;
  336. border: 0px solid green;
  337. overflow: hidden;
  338. }
  339.  
  340. #musiccontainer{
  341. position: absolute;
  342. width: 300px;
  343. height: 100%;
  344. top: 0px;
  345. left: 0px;
  346.  
  347. }
  348.  
  349. #playlistmarker{
  350. float: left;
  351. height: 100%;
  352. width: 30px;
  353. border: 1px solid white;
  354. font-family: 'Press Start 2P';
  355. font-size: 8pt;
  356. box-sizing: border-box;
  357. text-align: left;
  358. padding-left: 2px;
  359. padding-top: 7px;
  360. color: white;
  361. overflow: hidden;
  362. -webkit-transition: all 1s, width .8s;
  363. transition: all 1s, width .8s;
  364. text-decoration: none;
  365. }
  366.  
  367. #musiccontainer:hover #playlistmarker{width: 2px;
  368. -webkit-transition: all 1.2s;
  369. transition: 1.2s;}
  370.  
  371. #playlistmarker:hover{
  372. width: 160px !important;
  373. }
  374.  
  375. .songtitle{
  376. opacity: 0;
  377. letter-spacing: 1px;
  378. font-size: 1pt;
  379. -webkit-transition: all .5s 0s;
  380. transition: all .5s 0s;
  381. }
  382.  
  383. #playlistmarker:hover .songtitle{
  384. opacity: 1;
  385. font-size: 5pt;
  386. -webkit-transition: all 1s .2s;
  387. transition: all 1s .2s;
  388. }
  389.  
  390. #musiclinkcontainer{
  391. position: fixed;
  392. left: 57px;
  393. bottom: 3.5px;
  394. border: 0px solid red;
  395. height: 10px;
  396. width: 13px;
  397. overflow: hidden;
  398. zoom: 300%;
  399. padding-left: 5px;
  400. }
  401.  
  402. #musiclinkcontainer2{
  403. position: absolute;
  404. top: -5px;
  405. height: 30px;
  406. width: 300px;
  407. overflow: hidden;
  408. text-align: left;
  409. }
  410.  
  411. .songs{
  412. height: 100%;
  413. width: 100%;
  414. color: white;
  415. text-align: left;
  416. }
  417.  
  418. </style>
  419.  
  420. <div id="whole">
  421. <div id="mainhost">
  422. <div id="centerspin">
  423. <a href=#firstdiv id="planetlink1"> </a>
  424.  
  425. <a href=#seconddiv id="planetlink2"></a>
  426.  
  427. <a href=#thirddiv id="planetlink3"> </a>
  428. <a href=#fourthdiv id="planetlink4"></a>
  429. <a href=#fifthdiv id="planetlink5"></a>
  430. <div class="titlediv" id="verybasic">
  431. <div class="innerdiv">
  432. Eliana FREY
  433. </div>
  434. <div id="backgroundfiller">
  435. </div>
  436. </div>
  437.  
  438. <div class="titlediv" id="basicone">
  439. <div class="innerdiv">
  440. ONE
  441. </div>
  442. <div id="backgroundfiller">
  443. </div>
  444. </div>
  445.  
  446. <div class="titlediv" id="basictwo">
  447. <div class="innerdiv">
  448. TWO
  449. </div>
  450. <div id="backgroundfiller">
  451. </div>
  452. </div>
  453.  
  454. <div class="titlediv" id="basicthree">
  455. <div class="innerdiv">
  456. THREE
  457. </div>
  458. <div id="backgroundfiller">
  459. </div>
  460. </div>
  461.  
  462. <div class="titlediv" id="basicfour">
  463. <div class="innerdiv">
  464. FOUR
  465. </div>
  466. <div id="backgroundfiller">
  467. </div>
  468. </div>
  469.  
  470. <div class="titlediv" id="basicfive">
  471. <div class="innerdiv">
  472. FIVE
  473. </div>
  474. <div id="backgroundfiller">
  475. </div>
  476. </div>
  477.  
  478.  
  479. </div>
  480. </div>
  481.  
  482. <div id="titleblocker">
  483. </div>
  484.  
  485.  
  486. <div id="firstdiv">
  487. <div id="seconddiv">
  488. <div id="thirddiv">
  489. <div id="fourthdiv">
  490. <div id="fifthdiv">
  491. <div id="contentcontainer">
  492. <a href=#blank> <div id="headerdiv">
  493. <div id="backgroundfiller">
  494. </div>
  495. <div id="firstheader" class="selectheader">
  496. ONE
  497. </div>
  498. <div class="selectheader" id="secondheader">
  499. TWO
  500. </div>
  501. <div class="selectheader" id="thirdheader">
  502. THREE
  503. </div>
  504. <div class="selectheader" id="fourthheader">
  505. FOUR
  506. </div>
  507. <div class="selectheader" id="fifthheader">
  508. FIVE
  509. </div>
  510. </div></a>
  511. <div id="bodydiv">
  512. <div id="backgroundfiller"> </div>
  513. <div class="selectbody" id="firstbody">
  514. ONE. Lorem ipsum etc etc.
  515. ONE. Lorem ipsum etc etc.
  516. ONE. Lorem ipsum etc etc.
  517. ONE. Lorem ipsum etc etc.
  518. ONE. Lorem ipsum etc etc.
  519. ONE. Lorem ipsum etc etc.
  520. ONE. Lorem ipsum etc etc.
  521. ONE. Lorem ipsum etc etc.
  522. ONE. Lorem ipsum etc etc.
  523. ONE. Lorem ipsum etc etc.
  524. ONE. Lorem ipsum etc etc.
  525. ONE. Lorem ipsum etc etc.
  526. ONE. Lorem ipsum etc etc.
  527. ONE. Lorem ipsum etc etc.
  528. ONE. Lorem ipsum etc etc.
  529. ONE. Lorem ipsum etc etc.
  530. ONE. Lorem ipsum etc etc.
  531. ONE. Lorem ipsum etc etc.
  532. ONE. Lorem ipsum etc etc.
  533. ONE. Lorem ipsum etc etc.
  534. ONE. Lorem ipsum etc etc.
  535. ONE. Lorem ipsum etc etc.
  536. ONE. Lorem ipsum etc etc.
  537. ONE. Lorem ipsum etc etc.
  538. ONE. Lorem ipsum etc etc.
  539. ONE. Lorem ipsum etc etc.
  540. ONE. Lorem ipsum etc etc.
  541. </div>
  542. <div class="selectbody" id="secondbody">
  543. TWO. Lorem ipsum etc etc.
  544. </div>
  545. <div class="selectbody" id="thirdbody">
  546. THREE. Lorem ipsum etc etc.
  547. </div>
  548. <div class="selectbody" id="fourthbody">
  549. FOUR. Lorem ipsum etc etc.
  550. </div>
  551. <div class="selectbody" id="fifthbody">
  552. FIVE. Lorem ipsum etc etc.
  553. </div>
  554. </div>
  555. </div>
  556. </div>
  557. </div>
  558. </div>
  559. </div>
  560. </div>
  561.  
  562. <div id="musicholder">
  563. <div id="musiccontainer">
  564. <a id="playlistmarker" href=#firstsong>
  565. 1. <font class="songtitle">
  566. song title here.</font>
  567. </a>
  568. <a id="playlistmarker" href=#secondsong>
  569. 2. <font class="songtitle">
  570. song title here.</font>
  571. </a>
  572. <a id="playlistmarker" href=#thirdsong>
  573. 3.<font class="songtitle">
  574. song title here.</font>
  575. </a>
  576. <a id="playlistmarker" href=#fourthsong>
  577. 4.<font class="songtitle">
  578. song title here.</font>
  579. </a>
  580. <a id="playlistmarker" href=#fifthsong>
  581. 5.<font class="songtitle">
  582. song title here.</font>
  583. </a>
  584. </div>
  585. </div>
  586.  
  587. <div id="musiclinkcontainer">
  588. <div id="musiclinkcontainer2">
  589. <div id="firstsong" class="songs">
  590.  
  591. <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100" height="20">
  592. <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  593. <param name="bgcolor" value="#000000" />
  594. <param name="FlashVars" value="mp3=http://puu.sh/n0k1V/229997725b.mp3&autoplay=1&loadingcolor=e2e7eb" />
  595. </object>
  596.  
  597. </div>
  598. <div id="secondsong" class="songs">
  599.  
  600. <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100" height="20">
  601. <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  602. <param name="bgcolor" value="#000000" />
  603. <param name="FlashVars" value="mp3=http://puu.sh/lJksz/ced61523c2.mp3&autoplay=0&loadingcolor=e2e7eb" />
  604. </object>
  605.  
  606. </div>
  607. <div id="thirdsong" class="songs">
  608.  
  609. <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100" height="20">
  610. <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  611. <param name="bgcolor" value="#000000" />
  612. <param name="FlashVars" value="mp3=http://puu.sh/n0l2p/69f5e40a43.mp3&autoplay=0&loadingcolor=e2e7eb" />
  613. </object>
  614.  
  615. </div>
  616. <div id="fourthsong" class="songs">
  617.  
  618. <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100" height="20">
  619. <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  620. <param name="bgcolor" value="#000000" />
  621. <param name="FlashVars" value="mp3=http://puu.sh/n0ly0/55acdd7f6f.mp3&autoplay=0&loadingcolor=e2e7eb" />
  622. </object>
  623.  
  624. </div>
  625. <div id="fifthsong" class="songs">
  626.  
  627. <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100" height="20">
  628. <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  629. <param name="bgcolor" value="#000000" />
  630. <param name="FlashVars" value="mp3=http://puu.sh/n0mgW/21e6005e53.mp3&autoplay=0&loadingcolor=e2e7eb" />
  631. </object>
  632.  
  633.  
  634. </div>
  635. </div>
  636. </div>
  637.  
  638. </div>
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!