Advertisement
xariaaaa

[THEME] ғʟʏɪɴɢ ɢʀᴀᴄᴇ

May 15th, 2016
98
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.10 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.  
  4. <head><title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  8. <!---
  9. BASE CODE BY HAWTRONES
  10. CODED BY YOURS TRULY.
  11. --->
  12. <style type="text/css">
  13.  
  14. /* FONTS */
  15.  
  16. /* GASARA */
  17. @font-face { font-family: "gasara"; src: url('https://dl.dropbox.com/s/9mird7ef2oyhzbc/gasara.ttf'); }
  18.  
  19. /* DARLESTON */
  20. @font-face { font-family: "darleston"; src: url('https://dl.dropboxusercontent.com/s/pon2nz49g2gofuu/Darleston.otf') }
  21.  
  22. *, body, a {cursor: url(http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), auto;}
  23.  
  24. a:hover {cursor: url(http://i.imgur.com/IepP2.jpg), auto;}
  25.  
  26. ::selection {
  27. background: transparent;
  28. color: #ffffff;
  29. text-shadow: 0px 0px 2px #ffd4d4, -2px 0px 0px #ffa8a8;
  30. }
  31.  
  32. ::-moz-selection {
  33. background: transparent;
  34. color: #ffffff;
  35. text-shadow: 0px 0px 2px #ffd4d4, -2px 0px 0px #ffa8a8;
  36. }
  37.  
  38. ::-webkit-selection {
  39. background: transparent;
  40. color: #ffffff;
  41. text-shadow: 0px 0px 2px #ffd4d4, -2px 0px 0px #ffa8a8;
  42. }
  43.  
  44.  
  45. ::-webkit-scrollbar-thumb {
  46. height: auto;
  47. background-color: #eaeaea;
  48. }
  49.  
  50. ::-webkit-scrollbar {
  51. height: 9px;
  52. width: 4px;
  53. background-color: #ffffff;
  54. }
  55.  
  56. body {
  57. background: #eaeaea;
  58. background-image: url('{image:Background}');
  59. background-repeat: no-repeat;
  60. background-attachment: fixed;
  61. background-position: bottom right;
  62. }
  63.  
  64. a {
  65. text-decoration: none;
  66. outline: none;
  67. -moz-outline-style: none;
  68. color: #ffd4d4;
  69. -webkit-transition: opacity 0.7s linear;
  70. -webkit-transition: all 0.7s ease-out;
  71. -moz-transition: all 0.7s ease-out;
  72. transition: all 0.7s ease-out;
  73.  
  74. }
  75.  
  76. a:hover {
  77. text-shadow: 0px 0px 2px #ffa8a8, -2px 0px 0px #ffa8a8;
  78. -webkit-transition: opacity 0.7s linear;
  79. -webkit-transition: all 0.7s ease-out;
  80. -moz-transition: all 0.7s ease-out;
  81. transition: all 0.7s ease-out;
  82.  
  83. }
  84.  
  85. h1, h2, h3 {
  86. font-family: "darleston";
  87. font-size: 35px;
  88. text-align: justify;
  89. color: #ffd4d4;
  90. font-weight: 200;
  91. }
  92.  
  93. img {
  94. border:none;
  95. }
  96.  
  97. pre, code {
  98. font-family: "Gasara";
  99. font-size: 8px;
  100. line-height: 9px;
  101. word-wrap: break-word;
  102. background-color: #ffffff;
  103. padding: 3px;
  104. border-radius: 10px 0px 10px 0px;
  105. border-left: 1px solid #ffd4d4;
  106. border-right: 1px solid #ffa8a8;
  107. }
  108.  
  109. blockquote {
  110. margin-left: 10px;
  111. padding-left: 5px;
  112. border-left: 1px solid #ffa8a8;
  113. border-bottom: 1px dotted #ffa8a8;
  114. }
  115.  
  116. blockquote blockquote {
  117. margin-left: 10px;
  118. padding-left: 5px;
  119. border-left: 1px solid #ffa8a8;
  120. border-bottom: 1px dotted #ffa8a8;
  121. }
  122.  
  123. blockquote img {
  124. max-width: 195px !important;
  125. height: auto;
  126. opacity: 0.4;
  127. -webkit-transition: opacity 0.7s linear;
  128. -webkit-transition: all 0.7s ease-out;
  129. -moz-transition: all 0.7s ease-out;
  130. transition: all 0.7s ease-out;
  131. -webkit-filter: grayscale(100%);
  132. filter: grayscale(100%);
  133. }
  134.  
  135. blockquote img:hover {
  136. opacity: 0.7;
  137. -webkit-transition: opacity 0.7s linear;
  138. -webkit-transition: all 0.7s ease-out;
  139. -moz-transition: all 0.7s ease-out;
  140. transition: all 0.7s ease-out;
  141. -webkit-filter: grayscale(50%);
  142. filter: grayscale(50%);
  143. }
  144.  
  145. blockquote blockquote img {
  146. max-width: 140px !important;
  147. height: auto;
  148. opacity: 0.4;
  149. -webkit-transition: opacity 0.7s linear;
  150. -webkit-transition: all 0.7s ease-out;
  151. -moz-transition: all 0.7s ease-out;
  152. transition: all 0.7s ease-out;
  153. -webkit-filter: grayscale(100%);
  154. filter: grayscale(100%);
  155. }
  156.  
  157. blockquote blockquote img:hover {
  158. opacity: 0.7;
  159. -webkit-transition: opacity 0.7s linear;
  160. -webkit-transition: all 0.7s ease-out;
  161. -moz-transition: all 0.7s ease-out;
  162. transition: all 0.7s ease-out;
  163. -webkit-filter: grayscale(50%);
  164. filter: grayscale(50%);
  165. }
  166.  
  167. h1 {
  168. font-size: 40px;
  169. font-weight: 200;
  170. letter-spacing: 2px;
  171. font-family: "darleston";
  172. font-style: none;
  173. line-height: 28px;
  174. text-align: justify;
  175. padding: 0px;
  176. color: #ffd4d4;
  177. -webkit-transition: opacity 0.7s linear;
  178. -webkit-transition: all 0.7s ease-out;
  179. -moz-transition: all 0.7s ease-out;
  180. transition: all 0.7s ease-out;
  181. }
  182.  
  183. h1:hover {
  184. -webkit-transition: opacity 0.7s linear;
  185. -webkit-transition: all 0.7s ease-out;
  186. -moz-transition: all 0.7s ease-out;
  187. transition: all 0.7s ease-out;
  188. color: #ffffff;
  189. text-shadow: 0px 0px 2px #ffa8a8, -2px 0px 0px #ffa8a8;
  190. }
  191.  
  192. /*ENTRIES*/
  193.  
  194. #entries {
  195. padding: 2px;
  196. margin-left: 10%;
  197. margin-top: 80px;
  198. background-color: #ffffff;
  199. height: 400px;
  200. width: 80%;
  201. overflow: auto;
  202. border: 20px double #eaeaea;
  203. border-radius: 50px 0px 50px 0px;
  204. background-image: url('http://i.imgur.com/h2T8RHO.png');
  205. background-repeat: no-repeat;
  206. background-position: right top;
  207. }
  208.  
  209. /* POSTS */
  210.  
  211. #postwrap {
  212. margin-left: 150px;
  213. }
  214.  
  215. #post {
  216. background-color: #eaeaea;
  217. padding-left: 10px;
  218. padding-bottom: 20px;
  219. padding-right: 10px;
  220. padding-top: 10px;
  221. width: 250px;
  222. font-size: 10px;
  223. font-family: "Calibri";
  224. text-align: justify;
  225. letter-spacing: 0px;
  226. color: #a1a1a1;
  227. }
  228.  
  229. #post img, #photoset, #video {
  230. max-width: 245px;
  231. height: auto;
  232. opacity: 0.4;
  233. -webkit-transition: opacity 0.7s linear;
  234. -webkit-transition: all 0.7s ease-out;
  235. -moz-transition: all 0.7s ease-out;
  236. transition: all 0.7s ease-out;
  237. -webkit-filter: grayscale(100%);
  238. filter: grayscale(100%);
  239. }
  240.  
  241. #post img:hover, #photoset:hover, #video:hover {
  242. opacity: 0.7;
  243. -webkit-transition: opacity 0.7s linear;
  244. -webkit-transition: all 0.7s ease-out;
  245. -moz-transition: all 0.7s ease-out;
  246. transition: all 0.7s ease-out;
  247. -webkit-filter: grayscale(50%);
  248. filter: grayscale(50%);
  249. }
  250.  
  251. /*POST INFO*/
  252.  
  253. #info {
  254. width: 250px;
  255. text-align: left;
  256. font-family: "Gasara";
  257. margin-top: 10px;
  258. margin-left: 0px;
  259. letter-spacing: 1px;
  260. font-size: 8px;
  261. text-align: center;
  262. font-style: none;
  263. padding-top: 5px;
  264. line-height: 10px;
  265. text-transform: uppercase;
  266. border-top: 4px double #ffffff;
  267. }
  268.  
  269. #info a {
  270. text-align: center;
  271. color: #454545;
  272. -webkit-transition: opacity 0.7s linear;
  273. -webkit-transition: all 0.7s ease-out;
  274. -moz-transition: all 0.7s ease-out;
  275. transition: all 0.7s ease-out;
  276. }
  277.  
  278. #info a:hover {
  279. -webkit-transition: opacity 0.7s linear;
  280. -webkit-transition: all 0.7s ease-out;
  281. -moz-transition: all 0.7s ease-out;
  282. transition: all 0.7s ease-out;
  283. text-shadow: 0px 0px 2px #7dc2ff, -2px 0px 0px #ffc2ff;
  284. }
  285.  
  286. #tags {
  287. font-family: "Gasara";
  288. text-align: center;
  289. width: 240px;
  290. letter-spacing: -1px;
  291. margin-top:-7px;
  292. margin-left: 0px;
  293. font-size: 7px;
  294. padding: 5px;
  295. font-size: 8px;
  296. opacity:1;
  297. -webkit-transition: opacity 0.7s linear;
  298. -webkit-transition: all 0.7s ease-out;
  299. -moz-transition: all 0.7s ease-out;
  300. transition: all 0.7s ease-out;
  301. color: #454545;
  302. }
  303.  
  304. #tags a {
  305. text-decoration:none;
  306. display:inline-block;
  307. color: #454545;
  308. }
  309.  
  310. #tags a:hover {
  311. -webkit-transition: opacity 0.7s linear;
  312. -webkit-transition: all 0.7s ease-out;
  313. -moz-transition: all 0.7s ease-out;
  314. transition: all 0.7s ease-out;
  315. color: #ffc2ff;
  316. }
  317.  
  318. /* AUDIO */
  319. .audioplayer {
  320. width: 27px;
  321. height: 27px;
  322. padding-bottom: 3px;
  323. z-index: 99999;
  324. left: 0px;
  325. top: 0px;
  326. }
  327.  
  328. .soundcloud_audio_player {
  329. width: 100%;
  330. }
  331.  
  332. .tumblr_audio_player {
  333. width: 100%;
  334. }
  335.  
  336. /* QUOTES */
  337.  
  338. #quote {
  339. font-family: "darleston";
  340. font-size: 30px;
  341. line-height: 33px;
  342. letter-spacing: 2px;
  343. font-weight: 200;
  344. text-align: justify;
  345.  
  346. }
  347.  
  348. #source{
  349. font-family: "Gasara";
  350. font-size: 8px;
  351. letter-spacing: 1px;
  352. text-align: right;
  353. -webkit-transition: opacity 0.7s linear;
  354. -webkit-transition: all 0.7s ease-out;
  355. -moz-transition: all 0.7s ease-out;
  356. transition: all 0.7s ease-out;
  357. }
  358.  
  359. #source:hover{
  360. letter-spacing: 3px;
  361. -webkit-transition: opacity 0.7s linear;
  362. -webkit-transition: all 0.7s ease-out;
  363. -moz-transition: all 0.7s ease-out;
  364. transition: all 0.7s ease-out;
  365. }
  366.  
  367. /* CHAT */
  368.  
  369. #chat{
  370. font-family: "Calibri";
  371. font-size: 9px;
  372. letter-spacing: 2px;
  373. color: #454545;
  374. }
  375.  
  376. #chat b{
  377. font-family: "Gasara" !important;
  378. font-size: 8px;
  379. color: #ffc2ff;
  380. letter-spacing: 0px;
  381. }
  382.  
  383.  
  384. /* QUESTION */
  385.  
  386. #asker {
  387. font-family: "darleston";
  388. font-weight: 200;
  389. font-size: 55px;
  390. text-align: right;
  391. color: #ffa8a8;
  392. margin-bottom: -20px;
  393. }
  394.  
  395. #asker a {
  396. color: #ffa8a8;
  397. }
  398.  
  399. #asker a:hover {
  400. color: #ffffff;
  401. : 0px 0px 2px #ffa8a8, -2px 0px 0px #ffd4d4;
  402. }
  403.  
  404. #question {
  405. font-family: "Gasara";
  406. color: #e8e8e8;
  407. padding: 2px;
  408. background-color: #ffffff;
  409. text-align: justify;
  410. letter-spacing: 1px;
  411. line-height: 12px;
  412. font-size: 8px;
  413. }
  414.  
  415. #answer {
  416. text-align: justify;
  417. font-size: 10px;
  418. line-height: 11px;
  419. }
  420.  
  421. #answer img{
  422. max-width: 240px !important;
  423. height: auto;
  424. opacity: 0.4;
  425. -webkit-transition: opacity 0.7s linear;
  426. -webkit-transition: all 0.7s ease-out;
  427. -moz-transition: all 0.7s ease-out;
  428. transition: all 0.7s ease-out;
  429. -webkit-filter: grayscale(100%);
  430. filter: grayscale(100%);
  431. }
  432.  
  433. #answer img:hover {
  434. opacity: 0.7;
  435. -webkit-transition: opacity 0.7s linear;
  436. -webkit-transition: all 0.7s ease-out;
  437. -moz-transition: all 0.7s ease-out;
  438. transition: all 0.7s ease-out;
  439. -webkit-filter: grayscale(50%);
  440. filter: grayscale(50%);
  441. }
  442.  
  443. #notes {
  444. width:250px;
  445. font-family: "Gasara";
  446. font-size:8px;
  447. letter-spacing: 1;
  448. line-height: 100%;
  449. color: #a1a1a1;
  450. text-align: justify;
  451. text-transform: uppercase;
  452. word-wrap:break-word;
  453. background-color: #eaeaea;
  454. padding: 10px;
  455. -moz-transition:all ease-in-out 0.7s;
  456. -webkit-transition:all ease-in-out 0.7s;
  457. -o-transition:all ease-in-out 0.7s;
  458. transition:all ease-in-out 0.7s;
  459. }
  460.  
  461. #notes img {
  462. display:none;
  463. }
  464.  
  465. /* SIDEBAR */
  466.  
  467. #sidebar {
  468. height: 395px;
  469. width: 130px;
  470. padding: 5px;
  471. background-image: url('http://i.imgur.com/rUqFUzf.gif');
  472. background-color: #eaeaea;
  473. margin-left: 680px;
  474. margin-top: 20px;
  475. position: fixed;
  476. }
  477.  
  478. .desc {
  479. height: 50px;
  480. width: 132px;
  481. padding-left: -3px;
  482. padding-right: 3px;
  483. padding-top: 3px;
  484. font-family: "Gasara";
  485. font-size: 8px;
  486. letter-spacing: 1px;
  487. line-height: 9px;
  488. text-align: justify;
  489. color: #454545;
  490. }
  491.  
  492. .lnk {
  493. width: 132px;
  494. height: 20px;
  495. margin-top: 20px;
  496. text-transform: uppercase;
  497. font-weight: 500;
  498. font-family: "aspex";
  499. font-size: 25px;
  500. margin-left: 5px;
  501. }
  502.  
  503. .lnk a {
  504. color: #454545;
  505. }
  506.  
  507. .pag {
  508. margin-top: 7px;
  509. width: 132px;
  510. height: 15px;
  511. font-family: "Aspex";
  512. font-size: 12px;
  513. text-align: right;
  514. }
  515.  
  516.  
  517. /* Hover Title Style */
  518.  
  519. #s-m-t-tooltip{
  520. max-width:250px;
  521. margin-top:25px;
  522. margin-left:15px;
  523. padding-left:4px;
  524. padding-right:4px;
  525. z-index:9999999999999999999;
  526. background-color: #e8e8e8;
  527. color: #a1a1a1;
  528. font-family: "Gasara";
  529. font-size:8px;
  530. letter-spacing:0px;
  531. text-transform:uppercase;
  532. text-align:center;
  533. line-height:14px;
  534. border-left: 1px dotted #13bea6;
  535. border-bottom: 1px dotted #ffc2ff;
  536. box-shadow:1px 1px 3px rgba(0,0,0,.1);
  537. border-radius: 0px 0px 0px 30px
  538. }
  539.  
  540.  
  541. /* POP UP */
  542.  
  543. *html #fade {
  544. position: absolute;
  545. }
  546. #fade {
  547. display: none;
  548. background: #ffffff;
  549. position: fixed;
  550. left: 0;
  551. top: 0;
  552. width: 100%;
  553. height: 100%;
  554. opacity: 0;
  555. z-index: 9999;
  556. }
  557.  
  558. *html .popup_block {
  559. position: absolute;
  560. }
  561.  
  562. .popup_block{
  563. background-color: #eaeaea;
  564. display: none;
  565. position: fixed;
  566. float: left;
  567. top: 337px;
  568. left: 485px;
  569. height: 395px;
  570. padding: 5px;
  571. z-index: 9999999999;
  572. }
  573.  
  574. .popupimg {
  575. margin-top: -5px;
  576. margin-left: -5px;
  577. height: 125px;
  578. width: 270px;
  579. opacity: 1 !important;
  580. }
  581.  
  582. .popupimg img {
  583. height: 125px;
  584. width: 270px;
  585. opacity: 1 !important;
  586. }
  587.  
  588. .popupcont {
  589. margin-top: 5px;
  590. height: 280px;
  591. width: 260px;
  592. overflow-y: auto;
  593. font-family: "Gasara";
  594. font-size: 8px;
  595. line-height: 12px;
  596. color: #a1a1a1;
  597. text-align: justify;
  598. }
  599.  
  600. .popupcont a{
  601. color: #ffffff;
  602. }
  603.  
  604. .popupcont b {
  605. font-family: "aspex";
  606. font-size: 8px;
  607. }
  608.  
  609. /* ASPEX */
  610. @font-face{ font-family: "aspex"; src: url('https:/dl.dropboxusercontent.com/s/yeeehszy65j0cfk/ASPEX_0.TTF')
  611. }
  612.  
  613. .popupcont h2 {
  614. text-transform: uppercase !important;
  615. font-family: "aspex";
  616. font-size: 20px;
  617. text-align: right;
  618. color: #a1a1a1;
  619. -webkit-transition:all 0.4s linear;
  620. -moz-transition:all 0.4s linear;
  621. -o-transition:all 0.4s linear;
  622. transition:all 0.4s linear;
  623. }
  624.  
  625. .popupcont h2:hover {
  626. -webkit-transition:all 0.4s linear;
  627. -moz-transition:all 0.4s linear;
  628. -o-transition:all 0.4s linear;
  629. transition:all 0.4s linear;
  630. }
  631.  
  632. .popupcont2 {
  633. margin-top: 5px;
  634. height: 280px;
  635. width: 260px;
  636. overflow-y: auto;
  637. font-family: "Gasara";
  638. font-size: 8px;
  639. line-height: 12px;
  640. color: #ffa8a8;
  641. text-align: center;
  642. }
  643.  
  644. .popupcont2 a {
  645. background-color: #ffffff;
  646. padding: 7px 2px 2px 2px;
  647. height: 15px;
  648. width: 110px;
  649. margin-left: 5px;
  650. margin-right: 10px;
  651. margin-bottom: 10px;
  652. display: inline-block;
  653. color: #ffa8a8;
  654. }
  655.  
  656. .popupcont3 {
  657. margin-top: 10px;
  658. padding-bottom: 30px !important;
  659. height: 280px;
  660. width: 260px;
  661. overflow-y: auto;
  662. font-family: "Aspex";
  663. font-size: 15px;
  664. line-height: 35px;
  665. color: #ffa8a8;
  666. text-align: jusitfy;
  667. }
  668.  
  669. .popupcont3 i {
  670. font-family: "darleston";
  671. font-weight: 200;
  672. font-size: 30px;
  673. }
  674.  
  675. .popupcont4 {
  676. margin-top: 5px;
  677. height: 280px;
  678. width: 260px;
  679. overflow-y: auto;
  680. font-family: "Aspex";
  681. font-size: 8px;
  682. line-height: 12px;
  683. color: #a1a1a1;
  684. text-transform: uppercase;
  685. text-align: justify;
  686. }
  687.  
  688. .popupcont4 a {
  689. text-shadow: 0px 0px 0px #a1a1a1;
  690. color: #a1a1a1;
  691. }
  692.  
  693. #heartu {
  694. position: fixed;
  695. margin-left: 1045px;
  696. margin-top: 110px;
  697. height: 10px;
  698. width: 10px;
  699. }
  700.  
  701. #heartu img {
  702. opacity: 1 !important;
  703. }
  704.  
  705. #losers {
  706. margin-left: 945px;
  707. margin-top: 200px;
  708. position: fixed;
  709. height: 30px;
  710. width: 30px;
  711. }
  712.  
  713. #losers img {
  714. max-height: 30px;
  715. max-width: 30px;
  716. }
  717.  
  718. /* POP UP */
  719. ul.img-list {
  720. list-style-type: none;
  721. margin: 0;
  722. padding: 0;
  723. text-align: center;
  724. }
  725.  
  726. ul.img-list li {
  727. display: inline-block;
  728. width: 270px;
  729. height: 125px;
  730. position: relative;
  731. -webkit-transition:all 0.7s linear;
  732. -moz-transition:all 0.7s linear;
  733. -o-transition:all 0.7s linear;
  734. transition:all 0.74s linear;
  735. }
  736.  
  737. span.text-content {
  738. opacity: 0;
  739. background: #ffffff;
  740. display: table;
  741. width: 246px;
  742. height: 115px;
  743. padding: 5px;
  744. top: 0;
  745. left: 0;
  746. text-align: justify;
  747. position: absolute;
  748. -webkit-transition:all 0.7s linear;
  749. -moz-transition:all 0.7s linear;
  750. -o-transition:all 0.7s linear;
  751. transition:all 0.74s linear;
  752. }
  753.  
  754. ul.img-list li:hover span.text-content {
  755. opacity: 0.8;
  756. -webkit-transition:all 0.7s linear;
  757. -moz-transition:all 0.7s linear;
  758. -o-transition:all 0.7s linear;
  759. transition:all 0.74s linear;
  760. }
  761.  
  762. span.text-content span {
  763. margin-left: -10px;
  764. display: table-cell;
  765. text-align: justify;
  766. vertical-align: middle;
  767. }
  768.  
  769. #ytc{
  770. position: fixed;
  771. float: right;
  772. bottom: 10px;
  773. right: 10px;
  774. height: 50px;
  775. width: 50px;
  776. opacity: 0.6;
  777. -webkit-transition: opacity 0.7s linear;
  778. -webkit-transition: all 0.7s ease-out;
  779. -moz-transition: all 0.7s ease-out;
  780. transition: all 0.7s ease-out;
  781. }
  782.  
  783. #ytc:hover {
  784. transform: rotate(360deg);
  785. opacity: 1;
  786. transform:scale(0.5);
  787. -webkit-transition: opacity 0.7s linear;
  788. -webkit-transition: all 0.7s ease-out;
  789. -moz-transition: all 0.7s ease-out;
  790. transition: all 0.7s ease-out;
  791. }
  792.  
  793. #originalites {
  794. position: fixed;
  795. float: right;
  796. bottom: 10px;
  797. right: 70px;
  798. height: 50px;
  799. width: 50px;
  800. opacity: 0.6;
  801. -webkit-transition: opacity 0.7s linear;
  802. -webkit-transition: all 0.7s ease-out;
  803. -moz-transition: all 0.7s ease-out;
  804. transition: all 0.7s ease-out;
  805. }
  806.  
  807. #originalites:hover {
  808. transform: rotate(360deg);
  809. opacity: 1;
  810. transform:scale(0.5);
  811. -webkit-transition: opacity 0.7s linear;
  812. -webkit-transition: all 0.7s ease-out;
  813. -moz-transition: all 0.7s ease-out;
  814. transition: all 0.7s ease-out;
  815. }
  816. {CustomCSS}
  817. </style>
  818. <!-- POP UP SCRIPT -->
  819. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  820. <script>
  821. $(document).ready(function() {
  822.  
  823. $('a.poplight[href^=#]').click(function() {
  824. var popID = $(this).attr('rel');
  825. var popURL = $(this).attr('href');
  826. var query= popURL.split('?');
  827. var dim= query[1].split('&');
  828. var popWidth = dim[0].split('=')[1];
  829. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  830. var popMargTop = ($('#' + popID).height() + 80) / 2;
  831. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  832.  
  833. $('#' + popID).css({
  834. 'margin-top' : -popMargTop,
  835. 'margin-left' : -popMargLeft
  836. });
  837. $('body').append('<div id="fade"></div>');
  838. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
  839. return false;
  840. });
  841. $('a.close, #fade').live('click', function() {
  842. $('#fade , .popup_block').fadeOut(function() {
  843. $('#fade, a.close').remove();
  844. });
  845. return false;
  846. });
  847. });
  848. </script>
  849.  
  850.  
  851. <!-- S-M-T-TOOLTIP JAVA -->
  852. <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
  853. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  854. <script>
  855. (function($){
  856. $(document).ready(function(){
  857. $("[title]").style_my_tooltips();
  858. });
  859. })(jQuery);
  860. </script>
  861. </head>
  862.  
  863.  
  864.  
  865. <body>
  866.  
  867. <div id="loserr" class="popup_block">
  868. <div class="popupimg"><img src="http://i.imgur.com/7Dg9fSp.png" /></div>
  869. <div class="popupcont4">
  870.  
  871. <ul class="img-list">
  872. <li>
  873. <a href="http://yuromeo.tumblr.com/">
  874. <img src="http://i.imgur.com/IY1t0lV.gif" />
  875. <span class="text-content"><span>There's probably many things I should be telling you, like why sometimes you upset me or why I can't be happy if I don't see you plenty, but I guess it all sums up to 'I love you' and 'I need you'.</span></span>
  876. </a>
  877. </li>
  878.  
  879. <li>
  880. <a href="http://gttkwng.tumblr.com/">
  881. <img src="http://i.imgur.com/4cLAEB5.gif" />
  882. <span class="text-content"><span>So we don't spend a lot of time together lately but I think we've been going through far worse than not talking to each other. Never the less, you have a special place in my heart, even if you forget about me sometimes.</span></span>
  883. </a>
  884. </li>
  885.  
  886. <li>
  887. <a href="http://yienetic.tumblr.com/">
  888. <img src="http://i.imgur.com/BLSNJkd.gif" />
  889. <span class="text-content"><span>As a fan, I could say a million things about you but, as a friend, I become insecure. I don't know why we're friends or why you like my lame company but I'm really thankful for everything you share with me and I hope we'll get along for a while now!</span></span>
  890. </a>
  891. </li>
  892. </ul>
  893.  
  894. </div>
  895. </div>
  896.  
  897. <div id="profile" class="popup_block">
  898. <div class="popupimg"><img src="http://i.imgur.com/nvXGRii.png" /></div>
  899. <div class="popupcont">
  900. <h2>BASIC</h2>
  901. <b>NAME:</b> Christine Grace Vance<br />
  902. <b>NICKNAME:</b> Chris, Muffin, Chrissie (But she only lets Jimin call her the last one)<br />
  903. <b>BIRTHDAY:</b> Oct. 24th 1995 (age: 20)<br />
  904. <b>NATIONALITY:</b> English<br />
  905. <b>ETHNICITY:</b> Korean / English<br />
  906. <b>SPOUSE:</b> N/A (She is currently dating)<br />
  907. <b>OCCUPATION:</b> Sophomore Student / YouTuber<br />
  908.  
  909. <h2>APPEARANCE</h2>
  910. <b>HEIGHT:</b> 159cm<br />
  911. <b>WEIGHT:</b> 46kg<br />
  912. <b>HAIR COLOR:</b> Blonde<br />
  913. <b>EYE COLOR:</b> Black<br />
  914. <b>STYLE:</b> <a href="/tagged/.fashion">CLICK</a><br />
  915.  
  916. <h2>BACKGROUND</h2>
  917. <b>FAMILY:</b> Camellia Vance (mother), Daniel Jung (Father, deceased.)<br />
  918. <b>BRIEF PAST:</b> (Under construction!)<br />
  919. </div>
  920. </div>
  921.  
  922. <div id="navigation" class="popup_block">
  923. <div class="popupimg"><img src="http://i.imgur.com/nvXGRii.png" /></div>
  924. <div class="popupcont2">
  925. <a href="/tagged/.inquire">REPLIES</a> <a href="/tagged/.answer">ANSWERS</a><br />
  926. <a href="/tagged/.christine">VISUAL</a> <a href="/tagged/.chri">FACTS</a><br />
  927. <a href="/tagged/.cvancess">SOCIAL MEDIA</a> <a href="/tagged/.updates">UPDATES</a><br />
  928. </div>
  929. </div>
  930.  
  931. <div id="jimin" class="popup_block">
  932. <div class="popupimg"><img src="http://i.imgur.com/8tq6TAg.png" /></div>
  933. <div class="popupcont3">
  934. i dreamt of <i><a href="/tagged/& - sweetest cookie .">you</a></i>,
  935. and you were <i><a href="/tagged/& - fifteen o three o eight .">kissing</a></i> me.
  936. waking up, i was <i><a href="/tagged/& - cheesy cookie dough .">kissing</a></i>
  937. you were <i><a href="/tagged/& - cuddles and noon naps .">next</a></i> to me.
  938. </div>
  939. </div>
  940.  
  941. <div id="heartu"><!-- <a href="#?w=260" rel="jimin" class="poplight" title="Maybe I'm already crazy about you."> --><a title="Where are you? I miss you."><img src="http://33.media.tumblr.com/tumblr_lmsr23eQe61qcfn0j.gif" /></a></div>
  942.  
  943. <div id="losers"><a href="#?w=260" rel="loserr" class="poplight" title="My favourite bunch of losers!"><img src="http://33.media.tumblr.com/f862dfcc5df3744debbb591ba5f8df3e/tumblr_inline_ngdwrpWCNG1rpglid.gif" /></a></div>
  944.  
  945. <div id="sidebar">
  946. <div class="desc">She fell in love with the beauty of the rain on her face, the ocean's sweet song and the grace of a bird's flight.</div>
  947. <div class="lnk">
  948. <a href="/" title="Refresh">i.</a>
  949. <a href="/ask" title="Inbox">ii.</a>
  950. <a href="#?w=260" rel="profile" class="poplight" title="About">iii.</a>
  951. <a href="#?w=260" rel="navigation" class="poplight" title="Links">iv.</a>
  952. </div>
  953. <div class="pag">{block:PreviousPage}<a href="{PreviousPage}">PREV</a>{/block:PreviousPage}.{block:NextPage}<a href="{NextPage}">NEXT</a>{/block:NextPage}</div>
  954. </div>
  955.  
  956. <div id="entries">
  957. <div class="alignment">
  958. <div class="autopagerize_page_element">
  959. <div id="postwrap">
  960. {block:Posts}
  961. <div id="post">
  962.  
  963. <!-- TEXT POST -->
  964. {block:Text}
  965. <h1>{block:Title}{Title}{/block:Title}</h1>
  966. {Body}
  967. {/block:Text}
  968.  
  969. <!-- PHOTO POST -->
  970. {block:Photo}
  971. {LinkOpenTag}<center><img src="{PhotoURL-250}"></center>{LinkCloseTag}
  972. {block:Caption}{Caption}{/block:Caption}
  973. {/block:Photo}
  974.  
  975.  
  976. <!-- PHOTOSET POST -->
  977. {block:Photoset}
  978. <div id="photoset">{Photoset-250}</div>
  979. {block:Caption}{Caption}{/block:Caption}
  980. {/block:Photoset}
  981.  
  982.  
  983. <!-- QUOTE POST -->
  984. {block:Quote}
  985. <div id="quote">{Quote}</div>
  986. {block:Source}<div id="source"> —{Source}</div>{/block:Source}
  987. {/block:Quote}
  988.  
  989. <!-- LINK POST -->
  990. {block:Link}
  991. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  992. {block:Description}{Description}{/block:Description}
  993. {/block:Link}
  994.  
  995. <!-- CHAT POST -->
  996. {block:Chat}
  997. {block:Title}<h1>{Title}</h1>{/block:Title}
  998. {block:Lines}
  999. <div id="chat">
  1000. {block:Label}<b>{Label}</b>{/block:Label}{Line}<br>
  1001. </div>
  1002. {/block:Lines}
  1003. {/block:Chat}
  1004.  
  1005. <!-- AUDIO POSTS -->
  1006. {block:Audio}
  1007. {block:AudioPlayer}
  1008. <div class="audioplayer">{AudioPlayer}</div>
  1009. {/block:AudioPlayer}
  1010. <div style="margin-left: 30px; margin-top: -20px; float: left; text-transform: uppercase;">
  1011. {block:TrackName}<b>{TrackName}{/block:TrackName}</b>
  1012. {block:Artist}BY {Artist}{/block:Artist}
  1013. </div>
  1014. {block:IfShowCaptions}<hr style="border: 0px; height: 1px; background: {color:Border};">
  1015. {block:Caption}<div style="padding: 0px 5px;">{Caption}</div>{/block:Caption}
  1016. {/block:IfShowCaptions}
  1017. {/block:Audio}
  1018.  
  1019. <!-- VIDEO POST -->
  1020. {block:Video}<div id="video">{Video-250}</div>{block:Caption}{Caption}{/block:Caption}{/block:Video}
  1021.  
  1022. <!-- ASK POST -->
  1023. {block:Answer}
  1024. <div id="asker">{Asker}</div>
  1025. <div id="question"><b>{Question}</b></div>
  1026. <div id="answer">{Answer}</div>
  1027. {/block:Answer}
  1028.  
  1029. <!-- PERMALINK POST -->
  1030. <div id="info">
  1031. <a href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}</a> &mdash; {NoteCount}</a>
  1032.  
  1033. {block:HasTags}<div id="tags">
  1034. {block:Tags}<a href="/tagged/{Tag}">#{Tag}</a>&nbsp;{/block:Tags}
  1035. </div>{block:HasTags}
  1036. </div>
  1037.  
  1038.  
  1039. </div> <!-- END OF INDIVIDUAL ENTRY POST -->
  1040.  
  1041. <br><br>{block:PostNotes}<div id="notes"><left>{PostNotes}</div>{/block:PostNotes}
  1042. {/block:Posts}
  1043. </div> <!-- END OF POSTWRAP -->
  1044.  
  1045. </div> <!-- END OF ENTRIES -->
  1046.  
  1047. <div id="originalites"><a href="http://originalites.tumblr.com/" title="An elite collection of all originals."><img src="http://i.imgur.com/pbIHHqI.png"</a></div>
  1048.  
  1049. <div id="ytc"><a href="http://youllective.tumblr.com/" title="LIKE, COMMENT & SUBSCRIBE!"><img src="http://i.imgur.com/LnWqQgb.png" /></a></div>
  1050. </body>
  1051. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement