Advertisement
xariaaaa

[THEME] sᴜɴsʜɪɴᴇ ʀᴀʏ!

Jul 28th, 2016
85
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.65 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head><title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  7.  
  8. <!-- ʙᴀsᴇ ʙʏ ᴇɴᴛᴇʀᴘʀɪᴢᴇʀ. ᴛʜᴇᴍᴇ ʙʏ ᴀʀɪᴀsʀᴘʜ ᴘʟᴇᴀsᴇ ᴅᴏ ɴᴏᴛ sᴛᴇᴀʟ ɪᴛ! ᴇᴅɪᴛɪɴɢ ɪs ᴀʟᴏᴡᴇᴅ, ʙᴜᴛ ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛɪɴɢ ɪɴᴛᴀᴄᴛ. -->
  9.  
  10. <meta name="text:SidebarDescription" content="This is where your description goes!" />
  11. <meta name="text:LinkURL1" content="/" />
  12. <meta name="text:LinkURL2" content="/" />
  13. <meta name="text:LinkURL3" content="/" />
  14.  
  15. <meta name="text:Link1" content="Link title" />
  16. <meta name="text:Link2" content="Link title" />
  17. <meta name="text:Link3" content="Link title" />
  18.  
  19. <meta name="text:ZenithURL" content="/zenith" />
  20. <meta name="text:ZenithHover" content="Hover for Zenith" />
  21.  
  22. <meta name="text:CharmanderURL" content="/Charmander" />
  23. <meta name="text:CharmanderHover" content="Hover for Charmander" />
  24.  
  25. <style type="text/css">
  26.  
  27. /* BebasNeue NEUE */
  28. @font-face { font-family: "bebasneue"; src: url('https://dl.dropboxusercontent.com/u/67800931/bebasneue.otf'); }
  29.  
  30. /* WENDY */
  31. @font-face { font-family: wendy; src: url('https://dl.dropbox.com/s/g6b6vijy90j4kqx/wendy.ttf');}
  32.  
  33. /* SIGNARITA */
  34. @font-face{ font-family:"signarita"; src: url('https://dl.dropboxusercontent.com/s/gc29howy3wio7t8/signarita%20zhai%20rhianne.ttf?dl=1');}
  35.  
  36. /* THEME SPECS */
  37.  
  38. *, body, a {cursor: url(http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), auto;}
  39.  
  40. a:hover {cursor: url(http://i.imgur.com/IepP2.jpg), auto;}
  41.  
  42.  
  43. ::-webkit-scrollbar-thumb {
  44. height: auto;
  45. background-color: #afaee0;
  46. }
  47.  
  48. ::-webkit-scrollbar {
  49. height:9px;
  50. width:4px;
  51. background-color: #e1e7f5;
  52. }
  53.  
  54. body {
  55. background-color: #e1e7f5;
  56. }
  57.  
  58. a {
  59. color: #afaee0;
  60. text-decoration: none;
  61. -moz-transition:all 0.5s ease-in-out;
  62. -webkit-transition:all 0.5s ease-in-out;
  63. -o-transition:all 0.5s ease-in-out;
  64. transition:all 0.5s ease-in-out;
  65. }
  66.  
  67. img {
  68. border:none;
  69. }
  70.  
  71. blockquote, blockquote blockquote {
  72. margin-left: 10px;
  73. padding-left: 10px;
  74. border-left: 1px solid #afaee0;
  75. }
  76.  
  77. blockquote img, #post img, .photopost {
  78. max-width: 245px;
  79. height: auto;
  80. opacity: 0.3;
  81. -webkit-filter: grayscale(70%);
  82. -moz-transition:all 0.5s ease-in-out;
  83. -webkit-transition:all 0.5s ease-in-out;
  84. -o-transition:all 0.5s ease-in-out;
  85. transition:all 0.5s ease-in-out;
  86. }
  87.  
  88. blockquote blockquote img, {
  89. max-width: 200px;
  90. height: auto;
  91. opacity: 0.3;
  92. -webkit-filter: grayscale(70%);
  93. -moz-transition:all 0.5s ease-in-out;
  94. -webkit-transition:all 0.5s ease-in-out;
  95. -o-transition:all 0.5s ease-in-out;
  96. transition:all 0.5s ease-in-out;
  97. }
  98.  
  99. blockquote img:hover, blockquote blockquote img:hover, #post img:hover, .photopost:hover {
  100. opacity: 1;
  101. -webkit-filter: grayscale(0%);
  102. -moz-transition:all 0.5s ease-in-out;
  103. -webkit-transition:all 0.5s ease-in-out;
  104. -o-transition:all 0.5s ease-in-out;
  105. transition:all 0.5s ease-in-out;
  106. }
  107.  
  108. h1, h2, h3, h4 {
  109. font-family: "BebasNeue";
  110. font-size: 25px;
  111. color: #e1e7f5;
  112. -webkit-text-stroke: 1px #afaee0;
  113. text-shadow: 1px 1px 3px #afaee0;
  114. }
  115.  
  116. pre, code {
  117. font-family: "Wendy";
  118. font-size: 10px;
  119. text-align: center;
  120. padding: 12px;
  121. background-color: #e1e7f5;
  122. white-space: pre-wrap;
  123. word-wrap: break-word;
  124. }
  125.  
  126. /* POST */
  127.  
  128. #entries {
  129. width: 250px;
  130. padding: 20px;
  131. background-color: #ffffff;
  132. float: right;
  133. margin-right: 200px;
  134. }
  135.  
  136. #post {
  137. width: 250px;
  138. font-family: "Calibri";
  139. font-size: 11px;
  140. color: #010101;
  141. margin-top: 30px;
  142. margin-bottom: 30px;
  143. text-align: justify;
  144. }
  145.  
  146. #post b {
  147. text-transform: uppercase;
  148. font-size: 15px;
  149. }
  150.  
  151. #post i {
  152. text-transform: uppercase;
  153. text-shadow: -1px -1px 2px #000000;
  154. font-size: 9px;
  155. }
  156.  
  157. .posttitle {
  158. font-family: "BebasNeue";
  159. font-size: 20px;
  160. color: #e1e7f5;
  161. -webkit-text-stroke: 1px #afaee0;
  162. line-height: 23px;
  163. }
  164.  
  165. .posttitle:first-letter {
  166. font-family: "Signarita";
  167. }
  168.  
  169. .photopost, .photopostt {
  170. width: 245px;
  171. padding: 5px;
  172. background-color: #e1e7f5;
  173. }
  174.  
  175. .quote {
  176. font-family: "Calibri";
  177. font-size: 20px;
  178. color: #010101;
  179. }
  180.  
  181. .source {
  182. text-align: right;
  183. font-family: "Wendy";
  184. font-size: 11px;
  185. color: #afaee0;
  186. }
  187.  
  188. .chatpost {
  189. font-size: 13px;
  190. text-transform: uppercase;
  191. }
  192.  
  193. .chatpost b {
  194. font-family: "BebasNeue";
  195. font-size: 10px !important;
  196. color: #afaee0;
  197. }
  198.  
  199. .asker {
  200. font-family: "Signarita";
  201. text-transform: lowercase;
  202. font-size: 20px;
  203. text-align: center;
  204. margin-bottom: -40px;
  205. }
  206.  
  207. .question {
  208. font-family: "Wendy";
  209. font-size: 11px;
  210. background-color: #dfe0ff;
  211. padding: 10px;
  212. }
  213.  
  214. /* Audio */
  215. .player {
  216. width: 27px;
  217. height: 27px;
  218. left: 16px;
  219. top: 16px;
  220. opacity: 0.4;
  221. line-height: 0;
  222. overflow: hidden;
  223. }
  224.  
  225. .details {
  226. margin-top: -20px;
  227. margin-left: 23px;
  228. font-family: "Calibri";
  229. font-size: 10px;
  230. text-transform: uppercase;
  231. }
  232.  
  233. #postperma {
  234. height: 15px;
  235. width: 245px;
  236. padding: 5px;
  237. text-align: center;
  238. background-color: #e1e7f5;
  239. margin-top: 10px !important;
  240. margin-bottom: 40px !important;
  241. }
  242.  
  243. .permasq {
  244. width: 15px;
  245. margin-left: 12px;
  246. height: 15px;
  247. background-color: #ffffff;
  248. display: inline-block;
  249. margin-right: 15px;
  250. -moz-transition:all 0.5s ease-in-out;
  251. -webkit-transition:all 0.5s ease-in-out;
  252. -o-transition:all 0.5s ease-in-out;
  253. transition:all 0.5s ease-in-out;
  254. }
  255.  
  256. .permasq:hover {
  257. border-radius: 50%;
  258. transform: rotate(360deg);
  259. opacity: 0.5;
  260. -moz-transition:all 0.5s ease-in-out;
  261. -webkit-transition:all 0.5s ease-in-out;
  262. -o-transition:all 0.5s ease-in-out;
  263. transition:all 0.5s ease-in-out;
  264. }
  265.  
  266. #perma {
  267. font-family: "Calibri";
  268. font-size: 13px;
  269. text-align: center;
  270. color: #010101;
  271. margin-top: 10px;
  272. margin-bottom: 10px;
  273. }
  274.  
  275. #perma:first-letter {
  276. text-transform: uppercase;
  277. font-family: "Signarita";
  278. }
  279.  
  280. .notes {
  281. font-family: "Calibri";
  282. font-size: 10px;
  283. text-align: left;
  284. text-transform: uppercase;
  285. }
  286.  
  287. .notes img {
  288. display: none;
  289. }
  290.  
  291. .notes ol {
  292. display: none;
  293. }
  294.  
  295.  
  296. /* SIDEBAR */
  297.  
  298. #wrapper {
  299. float: left;
  300. height: 500px;
  301. width: 500px;
  302. position: fixed;
  303. left: 200px;
  304. bottom: 100px;
  305. }
  306.  
  307. .render {
  308. height: 350px;
  309. width: 200px;
  310. margin-left: 175px;
  311. margin-top: 100px;
  312. z-index: 99999;
  313. }
  314.  
  315. .stroke {
  316. height: 30px;
  317. width: 475px;
  318. border-radius: 10px;
  319. background-color: #ffffff;
  320. margin-top: -180px;
  321. margin-left: 0px;
  322. }
  323.  
  324. .firstimg {
  325. width: 120px;
  326. height: 160px;
  327. padding: 5px;
  328. background-color: #ffffff;
  329. margin-top: -205px;
  330. margin-left: 345px;
  331. border-radius: 10px;
  332. }
  333.  
  334. .firstimg img, .secondimg img {
  335. border-radius: 10px;
  336. }
  337.  
  338. .secondimg {
  339. width: 150px;
  340. height: 140px;
  341. padding: 5px;
  342. background-color: #ffffff;
  343. margin-left: 0px;
  344. border-radius: 10px;
  345. margin-top: 40px;
  346. }
  347.  
  348. .desc1 {
  349. width: 200px;
  350. height: 100px;
  351. background-color: #ffffff;
  352. border-radius: 10px;
  353. padding: 10px;
  354. margin-top :-310px;
  355. font-family: "Calibri";
  356. font-size: 10px;
  357. text-transform: uppercase;
  358. letter-spacing: 1px;
  359. line-height: 12px;
  360. text-align: justify;
  361. }
  362.  
  363. .link1 {
  364. margin-top: 2px;
  365. margin-left: 5px;
  366. word-spacing: 7px;
  367. width: 200px;
  368. height: 20px;
  369. font-family: "BebasNeue";
  370. font-size: 23px;
  371. color: #e1e7f5;
  372. }
  373.  
  374. .titlee {
  375. font-family: "Signarita";
  376. font-size: 20px;
  377. color: #272cb0;
  378. letter-spacing: -1px;
  379. margin-top: -175px;
  380. margin-left: -5px;
  381. }
  382.  
  383. .zenith {
  384. width: 135px;
  385. height: 60px;
  386. padding: 5px;
  387. background-color: #ffffff;
  388. margin-left: 330px;
  389. margin-top: 117px;
  390. border-radius: 10px;
  391. position: absolute;
  392. z-index: -9999;
  393. }
  394.  
  395. .zenith img {
  396. z-index: -999999;
  397. border-radius: 10px;
  398. }
  399.  
  400. .page {
  401. color: #272cb0;
  402. width: 140px;
  403. height: 10px;
  404. font-family: "Calibri";
  405. font-size: 10px;
  406. text-align: right;
  407. text-transform: uppercase;
  408. margin-left: 330px;
  409. margin-top: 190px;
  410. }
  411.  
  412. .poke {
  413. margin-top: 5px;
  414. margin-left: 400px;
  415. width: 45px;
  416. height: 45px;
  417. padding: 7px;
  418. border-radius: 10px;
  419. background-color: #ffffff;
  420. }
  421.  
  422. .poke img {
  423. border-radius: 10px;
  424. width: 45px;
  425. height: auto;
  426. }
  427.  
  428. #s-m-t-tooltip{
  429. max-width: 200px;
  430. padding: 2px;
  431. margin: 10px;
  432. background-color: #ffffff;
  433. border: 3px solid #e1e7f5;
  434. color: #010101;
  435. font-family: "Wendy";
  436. letter-spacing: 2px;
  437. text-transform: uppercase;
  438. font-size: 11px;
  439. line-height: 100%;
  440. -moz-box-shadow:0px 0px 2px #e1e7f5;
  441. -webkit-box-shadow:0px 0px 2px #e1e7f5;
  442. box-shadow:0px 0px 2px #e1e7f5;
  443. z-index:9999999999999999999999999999999999999999999999;
  444. }
  445.  
  446. #credit {
  447. position: fixed;
  448. bottom: 5px;
  449. left: 5px;
  450. font-family: "Wendy";
  451. font-size: 10px;
  452. }
  453. </style>
  454.  
  455. <script src="http://static.tumblr.com/whx9ghv/lq0m3ktlh/modernizr.custom.34978.js"></script>
  456. <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
  457. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  458. <script>
  459. (function($){
  460. $(document).ready(function(){
  461. $("[title]").style_my_tooltips();
  462. });
  463. })(jQuery);
  464. </script>
  465. </head>
  466.  
  467.  
  468.  
  469. <body>
  470.  
  471. <div id="wrapper">
  472. <div class="render">
  473. <img src="http://i.imgur.com/0jvy4gx.png" />
  474. </div>
  475.  
  476. <div class="stroke"></div>
  477. <div class="firstimg">
  478. <img src="http://i.imgur.com/Gb9d4ff.png" />
  479. </div>
  480. <div class="secondimg">
  481. <img src="http://i.imgur.com/RxVR3r5.png" />
  482. </div>
  483.  
  484. <div class="desc1">
  485. {text:SidebarDescription}
  486. </div>
  487.  
  488. <div class="link1">
  489. <a href="/" title="Home page">01!</a>
  490. <a href="/ask" title="Messages!">02!</a>
  491. <a href="{text:LinkURL1}" title="{text:Link1}">03!</a>
  492. <a href="{text:LinkURL2}" title="{text:Link1}">04!</a>
  493. <a href="{text:LinkURL3}" title="{text:Link1}">05!</a>
  494. </div>
  495.  
  496. <div class="titlee">
  497. Sunshine Ray!
  498. </div>
  499.  
  500. <div class="zenith">
  501. <a href="{text:ZenithURL}" title="{text:ZenithHover}"><img src="http://i.imgur.com/T3Aa1oY.png" /></a>
  502. </div>
  503.  
  504. <div class="page">
  505. {block:PreviousPage}<a href="{PreviousPage}">PREV</a>{/block:PreviousPage} // {block:NextPage}<a href="{NextPage}">NEXT</a>{/block:NextPage}
  506. </div>
  507. <div class="poke">
  508. <a href="{text:CharmanderURL}" title="{text:CharmanderHover}"><img src="http://static.tumblr.com/6d5fad2410cb092840ad58aa00051d01/ozvqtky/N7Onxn9yb/tumblr_static_1orkl5uzm4n40w444k88gssso.gif" /></a>
  509. </div>
  510. </div>
  511.  
  512.  
  513. <div id="entries">
  514.  
  515. {block:Posts}
  516. {block:ContentSource}
  517. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  518. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  519. {/block:SourceLogo}
  520. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  521.  
  522. <!-- {ReblogParentURL}{block:ReblogParentLogo}<img src="{BlackLogoURL}"
  523. width="{LogoWidth}" height="{LogoHeight}" alt="{ReblogParentTitle}" />
  524. {/block:ReblogParentLogo}
  525. {block:NoReblogParentLogo}{ReblogParentLink}{/block:NoReblogParentLogo} -->
  526. {/block:ContentSource}
  527. <div id="post">
  528.  
  529. <!-- TEXT POSTS -->
  530. {block:Text}
  531. <div class="posttitle">{block:Title}{Title}{/block:Title}</div>
  532. {Body}
  533. {/block:Text}
  534.  
  535. <!-- PHOTO POSTS -->
  536. {block:Photo}
  537. {LinkOpenTag}
  538. <div class="photopostt">
  539. <img src="{PhotoURL-250}" />
  540. </div>
  541. {LinkCloseTag}
  542. {block:Caption}{Caption}{/block:Caption}
  543. {/block:Photo}
  544.  
  545. <!-- PHOTOSET POSTS -->
  546. {block:Photoset}
  547. <div class="photopost">{Photoset-250}</div>
  548. {block:Caption}{Caption}{/block:Caption}
  549. {/block:Photoset}
  550.  
  551. <!-- QUOTE POSTS -->
  552. {block:Quote}
  553. <div class="quote">{Quote}</div>
  554. <div class="source">{block:Source} —{Source}{/block:Source}</div>
  555. {/block:Quote}
  556.  
  557. <!-- LINK POSTS -->
  558. {block:Link}
  559. <div class="posttitle"><a href="{URL}" {Target}>{Name}</a></div>
  560. {block:Description}{Description}{/block:Description}
  561. {/block:Link}
  562.  
  563. <!-- CHAT POSTS -->
  564. {block:Chat}
  565. <div class="posttile">{block:Title}{Title}{/block:Title}</div>
  566. <div class="chatpost">
  567. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}</div>
  568. {/block:Chat}
  569.  
  570.  
  571. <!-- ASK POST -->
  572. {block:Answer}
  573. <div class="asker">{Asker}</div>
  574. <div class="question">{Question}</div>
  575. {Answer}
  576. {/block:Answer}
  577.  
  578. <!-- AUDIO POST -->
  579. {block:Audio}
  580. <div class="player">{AudioPlayerGrey}</div>
  581. <div class="details">
  582. {block:TrackName}{TrackName}{/block:TrackName} by {block:Artist}{Artist}{/block:Artist}</div>
  583. {block:Caption}{Caption}{/block:Caption}
  584. {/block:Audio}
  585.  
  586. <!-- VIDEO POST -->
  587. {block:Video}
  588. <div class="photopost">{Video-250}</div>
  589. {block:Caption}{Caption}{/block:Caption}
  590. {/block:Video}
  591.  
  592. <!-- POST PERMA -->
  593.  
  594. {block:IndexPage}
  595. <div id="postperma">
  596. <a href="{Permalink}" title="{block:Date}{TimeAgo}{/block:Date}"><div class="permasq"></div></a>
  597. <a href="{Permalink}" title="With {NoteCountWithLabel}"><div class="permasq"></div></a>
  598. <a href="{Permalink}" title="FILED UNDER {block:HasTags}{block:Tags}#{Tag}{/block:Tags}{/block:HasTags}"><div class="permasq"></div></a>
  599. <a href="{ReblogParentURL}" title="VIA {ReblogParentName}"><div class="permasq"></div></a>
  600. <a href="{ReblogURL}" title="Reblog it?"><div class="permasq"></div></a>
  601. </div>
  602. {/block:IndexPage}
  603.  
  604.  
  605. {block:PermalinkPage}
  606. <div id="perma">
  607. Posted on {block:Date}{DayOfMonth} {Month} '{ShortYear}{/block:Date} with {NoteCountWithLabel}<br />
  608. {block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}{/block:HasTags}
  609. </div>
  610. {/block:PermalinkPage}
  611. </div>
  612.  
  613. {block:PermalinkPage}
  614. <div class="notes">
  615. {block:PostNotes}{PostNotes}{/block:PostNotes}
  616. </div>
  617. {/block:PermalinkPage}
  618.  
  619. {/block:Posts}
  620. </div>
  621.  
  622. <div id="credit"><a href="http://97brk.tumblr.com/" title="Theme made by 97brk for jvnei only! Please don't steal.">CREDIT</a></div>
  623. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement