Advertisement
xariaaaa

gikwang not done

Aug 13th, 2016
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.49 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ᴛᴇᴀʟ ᴛʜᴇ ᴄᴏᴅᴇ. -->
  9.  
  10. <style type="text/css">
  11.  
  12. /* GASARA */
  13. @font-face { font-family: "gasara"; src: url('https://dl.dropbox.com/s/9mird7ef2oyhzbc/gasara.ttf'); }
  14.  
  15. /* ASPEX */
  16. @font-face { font-family: "aspex"; src: url('https:/dl.dropboxusercontent.com/s/yeeehszy65j0cfk/ASPEX_0.TTF') }
  17.  
  18. /* DARLESTON */
  19. @font-face { font-family: "darleston"; src: url('https://dl.dropboxusercontent.com/s/pon2nz49g2gofuu/Darleston.otf') }
  20.  
  21. *, body, a {cursor: url(http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), auto;}
  22.  
  23. a:hover {cursor: url(http://i.imgur.com/IepP2.jpg), auto;}
  24.  
  25.  
  26. ::-webkit-scrollbar-thumb {
  27. height: auto;
  28. background-color: #00998a;
  29. }
  30.  
  31. ::-webkit-scrollbar {
  32. height: 9px;
  33. width: 3px;
  34. background-color: #d3e8e6;
  35. }
  36.  
  37. ::-webkit-scrollbar:vertical {
  38. height: 9px;
  39. width: 3px;
  40. background-color: #00998a;
  41. }
  42.  
  43. body {
  44. background-color: #d3e8e6;
  45. }
  46.  
  47. a {
  48. color: #00998a;
  49. outline: none;
  50. text-decoration: none;
  51. -webkit-transition: opacity 0.7s linear;
  52. -webkit-transition: all 0.7s ease-out;
  53. -moz-transition: all 0.7s ease-out;
  54. transition: all 0.7s ease-out;
  55. }
  56.  
  57. blockquote, blockquote blockqute {
  58. border-left: 1px solid #00998a;
  59. padding-left:5px;
  60. margin-left: 5px;
  61. }
  62.  
  63. blockquote img, blockqute blockquote img, .answer img, .photosetpost, .video, #post img {
  64. opacity: 0.3;
  65. -webkit-filter: grayscale(100%);
  66. -webkit-transition: opacity 0.7s linear;
  67. -webkit-transition: all 0.7s ease-out;
  68. -moz-transition: all 0.7s ease-out;
  69. transition: all 0.7s ease-out;
  70. }
  71.  
  72. blockquote img:hover, blockqute blockquote img:hover, .answer img:hover, .photosetpost:hover, .video:hover, #post img:hover {
  73. opacity: 0.8;
  74. -webkit-filter: grayscale(30%);
  75. -webkit-transition: opacity 0.7s linear;
  76. -webkit-transition: all 0.7s ease-out;
  77. -moz-transition: all 0.7s ease-out;
  78. transition: all 0.7s ease-out;
  79. }
  80.  
  81. blockquote img, .answer img, #post img {
  82. max-width: 240px;
  83. height: auto;
  84. }
  85.  
  86. blockquote blockquote img {
  87. max-width: 165px;
  88. height: auto;
  89. }
  90.  
  91. h1, h2, h3 {
  92. font-family: "Aspex";
  93. font-size: 15px;
  94. color: #00998a;
  95. font-weight: 500;
  96. text-transform: uppercase;
  97. line-height: 28px;
  98. text-align: justify;
  99. }
  100.  
  101. pre, code {
  102. font-family: "Gasara";
  103. font-size: 8px;
  104. line-height: 12px;
  105. letter-spacing: 1px;
  106. text-align: center;
  107. background-color: #d3e8e6;
  108. padding: 10px;
  109. white-space:pre-wrap;
  110. word-wrap:break-word;
  111. }
  112.  
  113. /* ENTRIES */
  114. #entries {
  115. background-color: #ffffff;
  116. padding: 20px;
  117. width: 275px;
  118. height: 100%;
  119. float: left;
  120. margin-top: 20px;
  121. margin-left: 300px;
  122. }
  123.  
  124. #post {
  125. width: 250px;
  126. padding: 10px;
  127. margin-bottom: 30px;
  128. border: 5px solid #d3e8e6;
  129. font-family: "Calibri";
  130. font-size: 12px;
  131. text-align: justify;
  132. }
  133.  
  134. #post b, #post i {
  135. font-family: "Gasara";
  136. font-size: 8px;
  137. }
  138.  
  139. .posttitle {
  140. font-family: "Bebas";
  141. color: #d3e8e6;
  142. font-size: 30px;
  143. line-height: 35px;
  144. text-align: justify;
  145. margin-bottom: 15px;
  146. }
  147.  
  148. .quote {
  149. font-family: "Aspex";
  150. font-size: 20px;
  151. line-height: 25px;
  152. text-align: justify;
  153. }
  154.  
  155. .source {
  156. text-align: right;
  157. font-family: "Gasara";
  158. font-size: 8px;
  159. }
  160.  
  161. /* Audio */
  162. .audioplayer {
  163. width: 27px;
  164. height: 27px;
  165. padding-bottom: 3px;
  166. z-index: 99999;
  167. left: 0px;
  168. top: 0px;
  169. }
  170.  
  171. .soundcloud_audio_player {
  172. width: 100%;
  173. }
  174.  
  175. .tumblr_audio_player {
  176. width: 100%;
  177. }
  178.  
  179. #postperma {
  180. margin-top: 5px;
  181. margin-bottom: 10px;
  182. margin-left:10px;
  183. width: 240px;
  184. color: #000000;
  185. padding: 5px;
  186. text-align: center;
  187. }
  188.  
  189. .pperma {
  190. margin-right: 30px;
  191. display: inline-block;
  192. height: 7px;
  193. width: 7px;
  194. padding: 3px;
  195. border: 3px solid #d3e8e6;
  196. background-color: #ffffff;
  197. -webkit-transition: opacity 0.5s linear;
  198. -webkit-transition: all 0.5s ease-out;
  199. -moz-transition: all 0.5s ease-out;
  200. transition: all 0.5s ease-out;
  201. }
  202.  
  203. .pperma:hover {
  204. border-radius: 50%;
  205. background-color: #d3e8e6;
  206. -webkit-transition: opacity 0.5s linear;
  207. -webkit-transition: all 0.5s ease-out;
  208. -moz-transition: all 0.5s ease-out;
  209. transition: all 0.5s ease-out;
  210. }
  211.  
  212. #pageperma {
  213. margin-top: 20px;
  214. width: 250px;
  215. }
  216.  
  217. .permatitle {
  218. font-family: "Aspex";
  219. font-size: 10px;
  220. text-align: center;
  221. }
  222.  
  223. .permatitle:first-letter {
  224. font-size: 13px;
  225. }
  226.  
  227. .permatags {
  228. font-family: "Gasara";
  229. font-size: 8px;
  230. text-align: justify;
  231. }
  232.  
  233. .postnotes {
  234. font-family: "Gasara";
  235. font-size :8px;
  236. text-align: justify;
  237. line-height: 12px;
  238. }
  239.  
  240. .postnotes img {
  241. display: none;
  242. }
  243.  
  244. #sidebarwrap {
  245. height: 400px;
  246. width: 500px;
  247. position: fixed;
  248. float: left;
  249. bottom: 150px;
  250. left: 680px;
  251. }
  252.  
  253. .bs {
  254. width: 500px;
  255. height: 10px;
  256. background-color: #ffffff;
  257. }
  258.  
  259. .pic1 {
  260. height: 230px;
  261. width: 230px;
  262. padding: 7px;
  263. background-color: #ffffff;
  264. margin-top: 5px;
  265. }
  266.  
  267. .pic2 {
  268. margin-top: -244px;
  269. margin-left: 255px;
  270. height: 230px;
  271. width: 230px;
  272. padding: 7px;
  273. background-color: #ffffff;
  274. }
  275.  
  276. .b2st {
  277. z-index: 9999999;
  278. position: absolute;
  279. height: 100px;
  280. width: 100px;
  281. padding: 7px;
  282. background-color: #ffffff;
  283. margin-top: -56px;
  284. margin-left: 196px;
  285. border-radius: 50%;
  286. -webkit-transition: opacity 0.5s linear;
  287. -webkit-transition: all 0.5s ease-out;
  288. -moz-transition: all 0.5s ease-out;
  289. transition: all 0.5s ease-out;
  290. }
  291.  
  292. .b2st img {
  293. border-radius: 50%;
  294. }
  295.  
  296. .beasteu {
  297. margin-left: -203px;
  298. margin-top: -299px;
  299. height: 230px;
  300. width: 230px;
  301. padding: 7px;
  302. background-color: #ffffff;
  303. font-family: "Calibri";
  304. opacity: 0;
  305. font-size: 10px;
  306. text-transform: uppercase;
  307. text-align: justify;
  308. -webkit-transition: opacity 0.5s linear;
  309. -webkit-transition: all 0.5s ease-out;
  310. -moz-transition: all 0.5s ease-out;
  311. transition: all 0.5s ease-out;
  312. }
  313.  
  314. .beasteu b {
  315. font-family: "Aspex";
  316. text-align: center;
  317. font-size: 15px;
  318. color: #00998a;
  319. }
  320.  
  321. .b2st:hover .beasteu, .b2st:hover .beasteu1 {
  322. opacity: 1;
  323. -webkit-transition: opacity 0.5s linear;
  324. -webkit-transition: all 0.5s ease-out;
  325. -moz-transition: all 0.5s ease-out;
  326. transition: all 0.5s ease-out;
  327. }
  328.  
  329. .beasteu1 {
  330. opacity: 0;
  331. margin-top: -244px;
  332. margin-left: 52px;
  333. background-color: #ffffff;
  334. height: 230px;
  335. width: 230px;
  336. padding: 7px;
  337. text-align: center;
  338. -webkit-transition: opacity 0.5s linear;
  339. -webkit-transition: all 0.5s ease-out;
  340. -moz-transition: all 0.5s ease-out;
  341. transition: all 0.5s ease-out;
  342. }
  343.  
  344. .beasteu1 img {
  345. margin-top: 25px;
  346. border-radius: 50%;
  347. margin-right: 7px;
  348. }
  349.  
  350. .bbs {
  351. width: 500px;
  352. height: 10px;
  353. background-color: #ffffff;
  354. margin-top: 5px;
  355. }
  356.  
  357. .desc1 {
  358. margin-top: 5px;
  359. width: 230px;
  360. height: 50px;
  361. padding: 7px;
  362. background-color: #ffffff;
  363. font-family: "Calibri";
  364. font-size: 12px;
  365. text-transform: uppercase;
  366. }
  367.  
  368. .pic3 {
  369. margin-top: 5px;
  370. width: 230px;
  371. height: 45px;
  372. padding: 7px;
  373. background-color: #ffffff;
  374. }
  375.  
  376. .stat1 {
  377. margin-top: 5px;
  378. width: 230px;
  379. height: 10px;
  380. padding: 7px;
  381. background-color: #ffffff;
  382. font-family: "Gasara";
  383. font-size: 8px;
  384. line-height: 9px;
  385. }
  386.  
  387. .musicplay {
  388. width: 230px;
  389. height: 20px;
  390. padding: 7px;
  391. background-color: #ffffff;
  392. text-align: right;
  393. margin-top: -142px;
  394. margin-left: 255px;
  395. }
  396.  
  397. .lnks {
  398. width: 270px;
  399. height: 90px;
  400. padding: 7px;
  401. margin-top: -2px;
  402. margin-left: 250px;
  403. }
  404.  
  405. .lnks a {
  406. display: inline-block;
  407. width: 103px;
  408. height: 7px;
  409. padding: 7px;
  410. font-family: "Gasara";
  411. font-size: 8px;
  412. text-align: right;
  413. background-color: #ffffff;
  414. margin-right: 5px;
  415. margin-bottom: 4px;
  416. }
  417.  
  418. #gayoon {
  419. position: fixed;
  420. z-index: 99999999;
  421. width: 80px;
  422. height: 80px;
  423. padding: 7px;
  424. background-color: #ffffff;
  425. border-radius: 50%;
  426. bottom: 500px;
  427. left: 650px;
  428. }
  429.  
  430. #gayoon img {
  431. position: absolute;
  432. border-radius: 50%;
  433. }
  434.  
  435. .gy1 {
  436. position: relative !important;
  437. opacity: 0;
  438. height: 227px;
  439. width: 230px;
  440. padding: 7px;
  441. margin-top: -15px;
  442. margin-left: 23px;
  443. background-color: #ffffff;
  444. font-family: "Calibri";
  445. font-size: 10px;
  446. text-transform: uppercase;
  447. text-align: justify;
  448. -webkit-transition: opacity 0.5s linear;
  449. -webkit-transition: all 0.5s ease-out;
  450. -moz-transition: all 0.5s ease-out;
  451. transition: all 0.5s ease-out;
  452. }
  453.  
  454. .gy1 b, .gy2 b {
  455. text-transform: none !important;
  456. font-family: "darleston";
  457. font-size: 30px;
  458. text-align: center;
  459. color: #00998a;
  460. }
  461.  
  462. .gy2 {
  463. position: relative !important;
  464. background-color: #ffffff;
  465. font-family: "Calibri";
  466. font-size: 10px;
  467. text-transform: uppercase;
  468. text-align: justify;
  469. position: absolute;
  470. width: 230px;
  471. height: 230px;
  472. padding: 7px;
  473. margin-left: 277px;
  474. margin-top: -15px;
  475. opacity: 0;
  476. }
  477.  
  478. #gayoon:hover .gy1, #gayoon:hover .gy2 {
  479. opacity: 1;
  480. margin-top: 53px;
  481. -webkit-transition: opacity 0.5s linear;
  482. -webkit-transition: all 0.5s ease-out;
  483. -moz-transition: all 0.5s ease-out;
  484. transition: all 0.5s ease-out;
  485. }
  486.  
  487. .bbbs {
  488. height: 10px;
  489. width: 500px;
  490. background-color: #ffffff;
  491. margin-top: 10px;
  492. }
  493.  
  494. #s-m-t-tooltip{
  495. max-width: 200px;
  496. padding: 5px;
  497. margin: 10px;
  498. background-color: #ffffff;
  499. border-left: 3px solid #00998a;
  500. color: #000000;
  501. font-family: "Gasara";
  502. letter-spacing: 2px;
  503. text-transform: uppercase;
  504. font-size: 8px;
  505. line-height: 100%;
  506. -moz-box-shadow:0px 0px 2px #00998a;
  507. -webkit-box-shadow:0px 0px 2px #00998a;
  508. box-shadow:0px 0px 2px #00998a;
  509. z-index:9999999999999999999999999999999999999999999999;
  510. }
  511.  
  512. #credit {
  513. position: fixed;
  514. bottom: 5px;
  515. left: 5px;
  516. font-size: 10px;
  517. }
  518.  
  519. </style>
  520.  
  521. <script src="http://static.tumblr.com/whx9ghv/lq0m3ktlh/modernizr.custom.34978.js"></script>
  522. <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
  523. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  524. <script>
  525. (function($){
  526. $(document).ready(function(){
  527. $("[title]").style_my_tooltips();
  528. });
  529. })(jQuery);
  530. </script>
  531. </head>
  532. <body>
  533.  
  534. <div id="gayoon">
  535. <img src="http://i.imgur.com/aD9MsYD.gif" />
  536.  
  537. <div class="gy1">
  538. {text:Gayoon1}
  539. </div>
  540.  
  541. <div class="gy2">
  542. {text:Gayoon2}
  543. </div>
  544. </div>
  545.  
  546. <div id="sidebarwrap">
  547.  
  548. <div class="bs"></div>
  549. <div class="pic1"><img src="http://i.imgur.com/TIBID3X.png" /></div>
  550. <div class="pic2"><img src="http://i.imgur.com/SpkD6Sx.png" /></div>
  551.  
  552. <div class="b2st">
  553. <img src="http://i.imgur.com/18r4nNx.gif" />
  554.  
  555. <div class="beasteu">
  556. {text:Beast}
  557. </div>
  558.  
  559. <div class="beasteu1">
  560. <a href="{text:JHURL}" title="{text:JHHover}"><img src="http://i.imgur.com/JT65NlJ.png" /></a>
  561. <a href="{text:YSURL}" title="{text:YSHover}"><img src="http://i.imgur.com/4aybXJ5.png" /></a>
  562. <a href="{text:DJURL}" title="{text:DJHover}"><img src="http://i.imgur.com/AsPhsud.png" /></a>
  563.  
  564. <a href="{text:GKURL}" title="{text:GKHover}"><img src="http://i.imgur.com/CLIenJd.jpg" /></a>
  565. <a href="{text:HSURL}" title="{text:HSHover}"><img src="http://i.imgur.com/t4pDYxc.png" /></a>
  566. <a href="{text:DWURL}" title="{text:DWHover}"><img src="http://i.imgur.com/0zhvY11.jpg" /></a>
  567. </div>
  568. </div>
  569.  
  570. <div class="bbs"></div>
  571.  
  572. <div class="stat1">{text:Stats}</div>
  573. <div class="desc1">
  574. {text:Desc1}
  575. </div>
  576.  
  577. <div class="pic3"><img src="http://i.imgur.com/Rz32R9C.png" /></div>
  578.  
  579. <div class="musicplay">
  580. <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
  581. <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  582. <param name="bgcolor" value="#ffffff" />
  583. <param name="FlashVars" value="mp3=%7Btext%3AMP3Link%7D&amp;autoplay=1&amp;bgcolor=ffffff&amp;loadingcolor=d3e8e6&amp;buttoncolor=d3e8e6&amp;slidercolor=d3e8e6" />
  584. </object>
  585. </div>
  586.  
  587. <div class="lnks">
  588. <a href="/">I. HOME</a> <a href="/ask">II. INBOX</a><br />
  589. <a href="{text:URL1}">III. {text:Link1}</a> <a href="{text:URL2}">IV. {text:Link2}</a><br />
  590. <a href="{text:URL3}">V. {text:Link3}</a> <a href="{text:URL4}">VI. {text:Link4}</a><br />
  591. <a href="{text:URL5}">VII. {text:Link5}</a> <a href="{text:URL6}">VIII. {text:Link6}</a><br />
  592. </div>
  593.  
  594. <div class="bbbs"></div>
  595. </div>
  596.  
  597. <div id="entries">
  598. {block:Posts}
  599. <div id="post">
  600.  
  601. <!-- TEXT POSTS -->
  602. {block:Text}
  603. <div class="posttitle">{block:Title}{Title}{/block:Title}</div>
  604. {Body}
  605. {/block:Text}
  606.  
  607. <!-- PHOTO POSTS -->
  608. {block:Photo}
  609. <center><img src="{PhotoURL-250}" /></center>
  610. {block:Caption}{Caption}{/block:Caption}
  611. {/block:Photo}
  612.  
  613. <!-- PHOTOSET POSTS -->
  614. {block:Photoset}
  615. <div class="photosetpost">{Photoset-250}</div>
  616. {block:Caption}{Caption}{/block:Caption}
  617. {/block:Photoset}
  618.  
  619. <!-- QUOTE POSTS -->
  620. {block:Quote}
  621. <div class="quote">{Quote}</div>
  622. <div class="source">{block:Source} —{Source}{/block:Source}</div>
  623. {/block:Quote}
  624.  
  625. <!-- LINK POSTS -->
  626. {block:Link}
  627. <div class="posttitle"><a href="{URL}" {Target}>{Name}</a></div>
  628. {block:Description}{Description}{/block:Description}
  629. {/block:Link}
  630.  
  631. <!-- CHAT POSTS -->
  632. {block:Chat}
  633. <div class="posttitle">{block:Title}{Title}{/block:Title}</div>
  634. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}
  635. {/block:Chat}
  636.  
  637.  
  638. <!-- ASK POST -->
  639. {block:Answer}
  640. <div id="asker">{Asker}</div>
  641. <div id="question">{Question}</div>
  642. {Answer}
  643. {/block:Answer}
  644.  
  645. <!-- AUDIO POST -->
  646. {block:Audio}
  647. {block:AudioPlayer}
  648. <div class="audioplayer">{AudioPlayer}</div>
  649. {/block:AudioPlayer}
  650. <div style="margin-left: 30px; margin-top: -20px; float: left; text-transform: uppercase;">
  651. {block:TrackName}<b>{TrackName}{/block:TrackName}</b>
  652. {block:Artist}BY {Artist}{/block:Artist}
  653. </div>
  654. {block:Caption}{Caption}{/block:Caption}
  655. {/block:Audio}
  656.  
  657. <!-- POST PERMA -->
  658.  
  659. {block:IndexPage}
  660. <div id="postperma">
  661. <a href="{Permalink}" title="{block:HasTags}{block:Tags} #{Tag}; {/block:Tags}{/block:HasTags}"><div class="pperma"></div></a>
  662. <a href="{Permalink}" title="{block:Date}{DayOfMonth}/{MonthNumber}/{Year}{/block:Date}"><div class="pperma"></div></a>
  663. <a href="{Permalink}" title="{NoteCount}"><div class="pperma"></div></a>
  664. <a href="{ReblogURL}" title="Reblog it?"><div class="pperma"></div></a>
  665. </div>
  666. {/block:IndexPage}
  667.  
  668. {block:PermalinkPage}
  669. <div id="pageperma">
  670. <div class="permatitle">
  671. Posted On: {block:Date}{DayOfMonth}/{MonthNumber}/{Year}{/block:Date} with {NoteCountWithLabel}!
  672. </div>
  673.  
  674. <div class="permatags">
  675. {block:HasTags}{block:Tags} #<a href="/tagged/{Tag}">{Tag}</a>, {/block:Tags}{/block:HasTags}
  676. </div>
  677. </div>
  678.  
  679. <div class="postnotes">
  680. {block:PostNotes}
  681. {PostNotes}{/block:PostNotes}
  682. {/block:Posts}
  683. </div>
  684. {/block:PermalinkPage}
  685. </div>
  686. {/block:Posts}
  687. </div>
  688.  
  689. <div id="credit"><a title="Theme by chrvstn for gttkwng, optimized for chrome, 1368 x 768. Please don't steal!">♕</a></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement