API tools faq
paste
Advertisement
kingdap

Shine On You Crazy Diamond

kingdap
Jul 20th, 2014
2,366
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.91 KB | None | 0 0
raw download clone embed print report
  1. <!--------------------------------------------------------------------------
  2. All-in-One Page #1: Shine On You Crazy Diamond by megidolaon-for-everyone
  3.  
  4.  
  5. Please keep the credits intact! You're free to make changes to the page, but only for personal use.
  6.  
  7. --------------------------------------------------------------------------->
  8.  
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  10.  
  11. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  12.  
  13. <link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
  14.  
  15. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  16.  
  17. <script src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:250, tip_fade_speed:350, attribute:"title"}); }); })(jQuery); </script>
  18.  
  19. <title>{Title}</title>
  20.  
  21. <link rel="shortcut icon" href="{Favicon}" />
  22.  
  23. <style type="text/css">
  24.  
  25. /*SCROLLBAR*/
  26. ::-webkit-scrollbar-thumb:vertical {
  27. background-color:#aaa;
  28. height: 30px;
  29. }
  30.  
  31. ::-webkit-scrollbar-thumb:horizontal {
  32. background-color:#aaa;
  33. width: 30px;
  34. }
  35.  
  36. ::-webkit-scrollbar {
  37. background-color:#bbb;
  38. border: 3px solid #eee;
  39. height: 7px;
  40. width: 7px;
  41. }
  42.  
  43. /*ENTIRE PAGE*/
  44. body {
  45. left: 0px;
  46. background-attachment: fixed;
  47. background-image: url('http://31.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo8_r1_250.png'); /*CHANGE BACKGROUND IMAGE HERE*/
  48. background-color: #fff; /*CHANGE BACKGROUND COLOR HERE*/
  49. color: #888;
  50. font-family: Calibri;
  51. font-size: 11px;
  52. }
  53.  
  54. /*SMT haha*/
  55. #s-m-t-tooltip {
  56. display: block;
  57. font-family: calibri;
  58. text-transform: UPPERCASE;
  59. background: #fff;
  60. font-size: 8px;
  61. line-height: 10px;
  62. letter-spacing: 1px;
  63. border: solid 1px #bbb;
  64. color:#777;
  65. max-width: 250px;
  66. word-wrap: break-word;
  67. padding:3px 5px;
  68. margin: 21px 1px 1px 15px;
  69. z-index: 999999;
  70. text-align:left;
  71. font-style:italic;
  72. opacity: 1;
  73. }
  74.  
  75. /*LINKS*/
  76. a:link, a:active, a:visited {
  77. text-decoration: none;
  78. color: #FF9696;
  79. -webkit-transition: all 0.4s ease-in-out;
  80. -moz-transition: all 0.4s ease-in-out;
  81. -o-transition: all 0.4s ease-in-out;
  82. }
  83.  
  84. /*LINK HOVER*/
  85. a:hover {
  86. color: #aaa;
  87. }
  88.  
  89. /*BOLD*/
  90. b, strong, .strong {
  91. color: #444;
  92. }
  93.  
  94. /*ITALICS*/
  95. i, em, .em {
  96. color: #bbb;
  97. }
  98.  
  99. /*QUOTATION MARKS*/
  100. .quote {
  101. display: inline-block;
  102. font-family: nixie-one;
  103. color: #999;
  104. font-size: 33px;
  105. margin-left: 10px;
  106. margin-right: 10px;
  107. }
  108.  
  109. /*QUOTE*/
  110. .quot {
  111. display: inline-block;
  112. color: #999;
  113. font-family: Nixie One;
  114. font-size: 36px;
  115. margin-top: 50px;
  116. }
  117.  
  118. /*UNDERLINE*/
  119. .line {
  120. width: 88%;
  121. border-bottom: 1px solid #ccc;
  122. }
  123.  
  124. /*NAVIGATION*/
  125. .quo {
  126. color: #aaa;
  127. margin-top: 5px;
  128. display: inline-block;
  129. font-size: 9px;
  130. text-transform: UPPERCASE;
  131. letter-spacing: 2px;
  132. font-family: calibri;
  133. margin-bottom: 20px;
  134. }
  135.  
  136. .quo a {
  137. color: #aaa;
  138. }
  139.  
  140. .quo a:hover {
  141. color: #ccc;
  142. }
  143.  
  144. /*ABOUT*/
  145. .title1 {
  146. text-align: right;
  147. float: left;
  148. font-family: nixie one;
  149. color: #bbb;
  150. width: 360px;
  151. font-size: 30px;
  152. border-bottom: 1px solid #ccc;
  153. padding: 0px 10px 0px 0px;
  154. letter-spacing: 2px;
  155. }
  156.  
  157. .title1::first-letter {
  158. color: #FF9696;
  159. }
  160.  
  161. .text1 {
  162. text-align: justify;
  163. margin-top: 10px;
  164. color: #444;
  165. float: left;
  166. width: 350px;
  167. font-family: calibri;
  168. font-size: 11px;
  169. padding: 0px 10px 0px 10px;
  170. height: 285px;
  171. overflow-y: auto;
  172. word-wrap: break-word;
  173. }
  174.  
  175. .label {
  176. color: #FF6B6B;
  177. font-family: calibri;
  178. font-size: 8px;
  179. line-height:12px;
  180. letter-spacing: 1px;
  181. text-transform: UPPERCASE;
  182. display: inline-block;
  183. }
  184.  
  185. .response {
  186. color: #888;
  187. font-size: 11px;
  188. line-height: 12px;
  189. font-family: calibri;
  190. display: inline-block;
  191. }
  192.  
  193. /*MEDIA*/
  194. .title2 {
  195. text-align: left;
  196. float: right;
  197. font-family: nixie one;
  198. color: #bbb;
  199. width: 360px;
  200. font-size: 30px;
  201. border-bottom: 1px solid #ccc;
  202. padding: 0px 0px 0px 10px;
  203. letter-spacing: 2px;
  204. }
  205.  
  206. .title2::first-letter {
  207. color: #FFA845;
  208. }
  209.  
  210. .text2 {
  211. text-align: justify;
  212. margin-top: 10px;
  213. color: #444;
  214. float: right;
  215. width: 350px;
  216. height: 285px;
  217. font-family: calibri;
  218. font-size: 11px;
  219. padding: 0px 10px 0px 10px;
  220. max-height: 550px;
  221. overflow-y: auto;
  222. word-wrap: break-word;
  223. }
  224.  
  225. .id {
  226. color: #FFA845;
  227. font-family: calibri;
  228. font-size: 8px;
  229. line-height: 12px;
  230. letter-spacing: 1px;
  231. text-transform: UPPERCASE;
  232. display: inline-block;
  233. }
  234.  
  235. .respond {
  236. color: #888;
  237. font-size: 11px;
  238. line-height: 12px;
  239. font-family: calibri;
  240. display: inline-block;
  241. }
  242.  
  243. .respond a {
  244. color: #888;
  245. }
  246.  
  247. .respond a:hover {
  248. color: #bbb;
  249. }
  250.  
  251. .media {
  252. color: #666;
  253. font-family: calibri;
  254. font-size: 8px;
  255. line-height: 12px;
  256. letter-spacing: 1px;
  257. text-transform: UPPERCASE;
  258. display: inline-block;
  259. }
  260.  
  261. /*LIST*/
  262. ul {
  263. margin-top: 0px;
  264. list-style-type: square;
  265. margin-left: -10px;
  266. color: #888;
  267. }
  268.  
  269. /*NAVIGATION*/
  270. .title3 {
  271. text-align: right;
  272. float: left;
  273. font-family: nixie one;
  274. color: #bbb;
  275. width: 360px;
  276. font-size: 30px;
  277. border-bottom: 1px solid #ccc;
  278. padding: 0px 10px 0px 0px;
  279. letter-spacing: 2px;
  280. }
  281.  
  282. .title3::first-letter {
  283. color: #FFF45E;
  284. }
  285.  
  286. .text3 {
  287. text-align: justify;
  288. margin-top: 10px;
  289. color: #444;
  290. float: left;
  291. width: 350px;
  292. font-family: calibri;
  293. font-size: 11px;
  294. padding: 0px 10px 0px 10px;
  295. max-height: 285px;
  296. overflow-y: auto;
  297. word-wrap: break-word;
  298. }
  299.  
  300. .ncont {
  301. width: 350px;
  302. overflow-y: auto;
  303. overflow-x: hidden;
  304. }
  305.  
  306. /*LINK*/
  307. .navi {
  308. text-align: center;
  309. display: inline-block;
  310. background: #ddd;
  311. width: 100px;
  312. margin-right: 7px;
  313. padding: 3px 4px;
  314. font-family: calibri;
  315. font-size: 9px;
  316. text-transform: UPPERCASE;
  317. letter-spacing: 2px;
  318. margin-bottom: 10px;
  319. }
  320.  
  321. .navi a {
  322. color: #666;
  323. }
  324.  
  325. .navi a:hover {
  326. color: #aaa;
  327. }
  328.  
  329. /*TAGS*/
  330. .title4 {
  331. text-align: left;
  332. float: right;
  333. font-family: nixie one;
  334. color: #bbb;
  335. width: 360px;
  336. font-size: 30px;
  337. border-bottom: 1px solid #ccc;
  338. padding: 0px 0px 0px 10px;
  339. letter-spacing: 2px;
  340. }
  341.  
  342. .title4::first-letter {
  343. color: #5EFF91;
  344. }
  345.  
  346. .text4 {
  347. text-align: justify;
  348. margin-top: 10px;
  349. color: #444;
  350. float: right;
  351. width: 360px;
  352. height: 285px;
  353. font-family: calibri;
  354. font-size: 11px;
  355. padding: 0px 10px 0px 10px;
  356. max-height: 550px;
  357. overflow-y: auto;
  358. word-wrap: break-word;
  359. }
  360.  
  361. .cont {
  362. width: 360px;
  363. overflow-y: auto;
  364. overflow-x: hidden;
  365. }
  366.  
  367. .tag {
  368. text-align: center;
  369. display: inline-block;
  370. background: #ddd;
  371. width: 100px;
  372. margin-left: 5px;
  373. margin-right: 2px;
  374. padding: 3px 4px;
  375. font-family: calibri;
  376. font-size: 9px;
  377. text-transform: UPPERCASE;
  378. letter-spacing: 2px;
  379. margin-bottom: 10px;
  380. }
  381.  
  382. .tag a {
  383. color: #5BB571;
  384. }
  385.  
  386. .tag a:hover {
  387. color: #aaa;
  388. }
  389.  
  390. /*BLOGROLL*/
  391. .title5 {
  392. text-align: right;
  393. float: left;
  394. font-family: nixie one;
  395. color: #bbb;
  396. width: 360px;
  397. font-size: 30px;
  398. border-bottom: 1px solid #ccc;
  399. padding: 0px 10px 0px 0px;
  400. letter-spacing: 2px;
  401. }
  402.  
  403. .title5::first-letter {
  404. color: #5EDCFF;
  405. }
  406.  
  407. .text5 {
  408. text-align: justify;
  409. margin-top: 10px;
  410. color: #444;
  411. float: left;
  412. width: 350px;
  413. font-family: calibri;
  414. font-size: 11px;
  415. padding: 0px 10px 0px 10px;
  416. height: 285px;
  417. overflow-y: auto;
  418. word-wrap: break-word;
  419. }
  420.  
  421. .blog {
  422. width: 66px;
  423. margin-bottom: 0px;
  424. display: inline-block;
  425. border-radius: 100px;
  426. margin-left: 0px;
  427. margin-right: 20px;
  428. }
  429.  
  430. .blog img {
  431. overflow: visible;
  432. margin-bottom: 10px;
  433. padding: 5px 5px 5px 5px;
  434. width: 66px;
  435. border-radius: 100px;
  436. -webkit-transition: all 0.7s ease-in-out;
  437. -moz-transition: all 0.7s ease-in-out;
  438. -o-transition: all 0.7s ease-in-out;
  439. }
  440.  
  441. .blog img:hover {
  442. border-radius: 0px;
  443. }
  444.  
  445. /*IMAGES*/
  446. .image1 {
  447. float: right;
  448. width: 180px;
  449. margin-top: -35px;
  450. }
  451.  
  452. .image1 img {
  453. width: 180px;
  454. height: 330px;
  455. border-top-left-radius: 50px;
  456. border-top-right-radius: 0px;
  457. border-bottom-right-radius: 50px;
  458. border-bottom-left-radius: 0px;
  459. }
  460.  
  461. .image2 {
  462. float: left;
  463. width: 180px;
  464. margin-top: -35px;
  465. }
  466.  
  467. .image2 img {
  468. width: 180px;
  469. height: 330px;
  470. border-top-left-radius: 50px;
  471. border-top-right-radius: 0px;
  472. border-bottom-right-radius: 50px;
  473. border-bottom-left-radius: 0px;
  474. }
  475.  
  476. /*MOVING PANEL*/
  477. .stepcarousel {
  478. position: relative;
  479. background: #fff;
  480. border: 1px solid #eee;
  481. width: 600px;
  482. height: 370px;
  483. }
  484.  
  485. .stepcarousel .belt {
  486. position: absolute;
  487. left: 0px;
  488. top: 0px;
  489. }
  490.  
  491. .stepcarousel .panel {
  492. float: left;
  493. background: #eee;
  494. margin: 10px;
  495. width: 560px;
  496. height: 330px;
  497. padding: 10px;
  498. }
  499.  
  500. </style>
  501.  
  502. <head>
  503.  
  504. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  505. <script type="text/javascript" src="http://static.tumblr.com/lv6casp/aCNm74ixy/stepcarousel.js">
  506. /***********************************************
  507. * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
  508. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  509. * This notice must stay intact for legal use
  510. ***********************************************/
  511. </script>
  512.  
  513. <script type="text/javascript">
  514. stepcarousel.setup({
  515. galleryid: 'mygallery', //id of carousel DIV
  516. beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
  517. panelclass: 'panel', //class of panel DIVs each holding content
  518. autostep: {enable:false, moveby:1, pause:3000},
  519. panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
  520. defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i.imgur.com/hmOm0mA.png', -40, 175], rightnav: ['http://i.imgur.com/ad4Fmh1.png', 10, 175]},
  521. statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
  522. contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
  523. })
  524. </script>
  525.  
  526. </head>
  527.  
  528. <body>
  529. <center>
  530.  
  531. <div class="quote">“</div>
  532. <div class="quot">Insert a quote here</div>
  533. <div class="quote">”</div>
  534.  
  535. <div class="line"></div>
  536.  
  537. <div class="quo">
  538. <a href="/">HOME</a>&nbsp
  539. <a href="/ask">INBOX</a>&nbsp
  540. <a href="/archive">PAST</a>&nbsp
  541. <a href="https://www.tumblr.com/dashboard">DASH</a>&nbsp
  542. <a href="http://mfe-themes.tumblr.com/">THEME</a>
  543. </div>
  544.  
  545. <div align="center">
  546. <p id="mygallery-paginate" style="width:416px;margin-top: 0px;margin-bottom:5px;">
  547. <img src="http://i.imgur.com/QERRnsE.png" data-over="http://i.imgur.com/GSQCrd2.png" data-select="http://i.imgur.com/GSQCrd2.png" data-moveby="1" />
  548. </p>
  549. </div>
  550. <div id="mygallery" class="stepcarousel">
  551. <div class="belt">
  552.  
  553. <!-- ABOUT -->
  554. <div class="panel">
  555. <div class="title1">ABOUT</div>
  556. <div class="text1">
  557. <div class="label">NAME:</div>&nbsp
  558. <div class="response">name here</div><br>
  559.  
  560. <div class="label">AGE:</div>&nbsp
  561. <div class="response">age here</div><br>
  562.  
  563. <div class="label">GENDER:</div>&nbsp
  564. <div class="response">gender here</div><br>
  565.  
  566. <div class="label">LOCATION:</div>&nbsp
  567. <div class="response" style="margin-bottom: 5px;">location here</div><br>
  568. enter more text here!!!
  569. </div>
  570. <!--sidebar image here-->
  571. <div class="image1"><img src="http://i.imgur.com/7L5LFpX.png"></div>
  572. </div>
  573.  
  574. <!--MEDIA-->
  575. <div class="panel">
  576. <div class="title2">MEDIA</div>
  577. <!--you can add more by copying and pasting the code from <div class="id"> to <br>. feel free to remove the ones you don't have-->
  578. <div class="text2">
  579. <div class="id">TWITTER:</div>&nbsp
  580. <div class="respond"><a href="twitter url">twitter</a></div><br>
  581.  
  582. <div class="id">INSTAGRAM:</div>&nbsp
  583. <div class="respond"><a href="instagram url">instagram</a></div><br>
  584.  
  585. <div class="id">YOUTUBE:</div>&nbsp
  586. <div class="respond"><a href="youtube url">youtube</a></div><br>
  587.  
  588. <div class="id">PIXIV:</div>&nbsp
  589. <div class="respond"><a href="pixiv url">pixiv</a></div><br>
  590.  
  591. <div class="id">FRIEND CODE:</div>&nbsp
  592. <div class="respond">friend code</div><br>
  593.  
  594. <div class="id">PSN:</div>&nbsp
  595. <div class="respond">psn</div><br>
  596.  
  597. <div class="id">STEAM:</div>&nbsp
  598. <div class="respond">steam</div><br>
  599.  
  600. <div class="media" style="margin-top: 10px;">Watching</div>
  601. <ul>
  602. <!--to add more, just insert <li>SHOW HERE</li> before </ul>-->
  603. <li>show you're currently watching</li>
  604. <li>cool</li>
  605. </ul>
  606.  
  607. <div class="media">Reading</div>
  608. <ul>
  609. <!--to add more, just insert <li>BOOK HERE</li> before </ul>-->
  610. <li>book, manga, novel, etc.</li>
  611. <li>another one</li>
  612. </ul>
  613.  
  614. <div class="media">Playing</div>
  615. <ul>
  616. <!--to add more, just insert <li>GAME HERE</li> before </ul>-->
  617. <li>game</li>
  618. <li>cool</li>
  619. </ul>
  620. enter any text here if you wish
  621. </div>
  622. <!--sidebar image here-->
  623. <div class="image2"><img src="http://i.imgur.com/G3UBsCR.png"></div>
  624. </div>
  625.  
  626. <!--NAVIGATION-->
  627. <div class="panel">
  628. <div class="title3">NAVIGATION</div>
  629. <div class="text3">
  630. <div class="ncont">
  631. <div class="navi"><a href="link url">Link 1</a></div>
  632. <div class="navi"><a href="link url">Link 2</a></div>
  633. <div class="navi"><a href="link url">Link 3</a></div>
  634. <div class="navi"><a href="link url">Link 4</a></div>
  635. <div class="navi"><a href="link url">Link 5</a></div>
  636. <div class="navi"><a href="link url">Link 6</a></div>
  637. <!--to add more links, copy and paste:
  638. <div class="navi"><a href="link here">Link Name</a></div>-->
  639. </div>
  640. </div>
  641. <!--sidebar image here-->
  642. <div class="image1"><img src="http://i.imgur.com/rfci47u.png"></div>
  643. </div>
  644.  
  645. <!--TAGS-->
  646. <div class="panel">
  647. <div class="title4">TAGS</div>
  648. <div class="text4">
  649. <div class="ncont">
  650. <div class="tag"><a href="/tagged/">TAG 1</a></div>
  651. <div class="tag"><a href="/tagged/">TAG 2</a></div>
  652. <div class="tag"><a href="/tagged/">TAG 3</a></div>
  653. <div class="tag"><a href="/tagged/">TAG 4</a></div>
  654. <div class="tag"><a href="/tagged/">TAG 5</a></div>
  655. <div class="tag"><a href="/tagged/">TAG 6</a></div>
  656. <!--to add more tags, copy and paste:
  657. <div class="tag"><a href="/tagged/TAG HERE">Tag Name</a></div>-->
  658. </div>
  659. </div>
  660. <!--sidebar image here-->
  661. <div class="image2"><img src="http://i.imgur.com/UVEknEC.png"></div>
  662. </div>
  663.  
  664. <!--BLOGROLL-->
  665. <div class="panel">
  666. <div class="title5">FOLLOWING</div>
  667. <div class="text5">
  668. {block:Following}
  669. <div class="ncont">
  670. {block:Followed}
  671. <div class="blog">
  672. <a href="{FollowedURL}" title="{FollowedName}">
  673. <img src="{FollowedPortraitURL-96}" "width=66px"/>
  674. </a>
  675. </div>
  676. {/block:Followed}
  677. </div>
  678. {/block:Following}
  679. </div>
  680. <!--sidebar image here-->
  681. <div class="image1"><img src="http://i.imgur.com/vGAS31w.png"></div>
  682. </div>
  683.  
  684. <!--END OF PANELS-->
  685.  
  686. </div>
  687. </div>
  688.  
  689. </center>
  690. </body>
  691. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!