API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 3rd, 2015
79
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6. <link rel="alternate" type="application/rss+xml" href="http://surasshu.com/rss" />
  7.  
  8. <style>
  9. html,body{
  10. height:100%;
  11. position: relative;
  12. }
  13.  
  14.  
  15.  
  16.  
  17. body {
  18. background:#000;
  19. color:#fff;
  20. font-family:"Helvetica","Arial",sans-serif;
  21. padding:0;
  22. }
  23. header {
  24. height:390px;
  25. width:1000px;
  26. margin:0 auto;
  27. background-image:url(http://static.tumblr.com/6cyhfxh/9ffnmosue/suraheaders.png);
  28. position: relative;
  29. margin-top:-10px;
  30. }
  31. p {
  32. margin:5px;
  33. }
  34. a {
  35. color:#fff;
  36. }
  37. h3 {
  38. text-align: center;
  39. color: #fff;
  40. }
  41. div#postcontainer {
  42. width:1000px;
  43. margin:0 auto 0;
  44. background-image:url(http://static.tumblr.com/6cyhfxh/9QFnmovgn/paintdrips_long3.png);
  45. background-repeat:repeat-y;
  46. background-position:top;
  47. padding-bottom:50px;
  48. }
  49. div.post {
  50. border-radius:5px;
  51. padding:10px;
  52. background:#999;
  53. display:inline-block;
  54. margin-bottom:50px;
  55. width:500px;
  56. }
  57. div.post .caption blockquote {
  58. font-size:10px;
  59. margin:10px 20px;
  60. border-left:1px solid #aaa;
  61. padding-left:10px;
  62. }
  63. div.post .caption, div.post .caption blockquote {
  64. line-height:1.6em;
  65. }
  66. div.post .caption a, div.post .caption blockquote a,
  67. div.post .caption a:hover, div.post .caption blockquote a:hover
  68. div.post .caption a:active, div.post .caption blockquote a:active
  69. div.post .caption a:visited, div.post .caption blockquote a:visited
  70. {
  71. color:#aaa;
  72. }
  73. blockquote pre {
  74. white-space:normal;
  75. }
  76. div.post.photo > img {
  77. margin: 0 auto;
  78. width:100%;
  79. }
  80. div.post.photo > img, div.post > iframe {
  81. display:block;
  82. }
  83. div.description, div.caption {
  84. background:#000;
  85. padding:10px;
  86. border-radius:0 0px 2px 2px;
  87. font-size:14px;
  88. /*margin-top:10px;*/
  89. }
  90. div.caption img {
  91. display: block;
  92. max-width:400px;
  93. max-height:400px;
  94.  
  95. width: auto;
  96. height: auto;
  97. }
  98.  
  99. display: block;
  100. width: auto;
  101. height: auto;
  102.  
  103. p.caption {
  104. background:#999;
  105. }
  106.  
  107.  
  108. /* COLOR TAGS */
  109. div.post { /* more */
  110. background:#ae0085;
  111. margin-left:6%;
  112. }
  113. div.post.soul_saga {
  114. background:#1a53d4;
  115. margin-left:0;
  116. }
  117. div.post.fistful_of_gun {
  118. background:#5d00ba;
  119. margin-left:5%;
  120. }
  121. div.post.steven_universe {
  122. background:#ea0070;
  123. margin-left:10%;
  124. }
  125. div.post.cryamore { /* reddish orange */
  126. background:#ff423b;
  127. margin-left:23%;
  128. }
  129. div.post.aivi_surasshu {
  130. background:#ff8e47;
  131. margin-left:35%;
  132. }
  133. div.post.personal {
  134. background:#ffc052;
  135. margin-left:42%;
  136. }
  137. /* end color tags */
  138. header a.headlink {
  139. position: absolute;
  140. display: block;
  141. text-indent: 100%;
  142. white-space: nowrap;
  143. overflow: hidden;
  144. color: transparent;
  145. }
  146.  
  147. header a.headlink.home {
  148. top: 80px;
  149. left:25px;
  150. width:100px;
  151. height:100px;
  152. }
  153.  
  154. header a.headlink.about {
  155. top: 275px;
  156. left:60px;
  157. width:25px;
  158. height:25px;
  159. }
  160.  
  161.  
  162. header a.headlink.soul_saga {
  163. top:210px;
  164. left:115px;
  165. width:75px;
  166. height:75px;
  167. }
  168.  
  169. header a.headlink.fistful_of_gun {
  170. top:150px;
  171. left:160px;
  172. width:80px;
  173. height:60px;
  174. }
  175.  
  176. header a.headlink.more {
  177. top:100px;
  178. left:230px;
  179. width:60px;
  180. height:50px;
  181. }
  182.  
  183. header a.headlink.steven_universe {
  184. top: 150px;
  185. left:280px;
  186. width: 175px;
  187. height:50px;
  188. }
  189.  
  190. header a.headlink.cryamore {
  191. top:215px;
  192. height:40px;
  193. left:470px;
  194. width:105px
  195. }
  196.  
  197. header a.headlink.aivi_surasshu {
  198. top:115px;
  199. left:530px;
  200. width:170px;
  201. height:40px;
  202. }
  203.  
  204. header a.headlink.personal {
  205. left:700px;
  206. top:185px;
  207. width:100px;
  208. height:40px;
  209. }
  210.  
  211. header a.headlink.twitter,
  212. header a.headlink.soundcloud,
  213. header a.headlink.rss {
  214. left: 863px;
  215. width:40px;
  216. height: 40px;
  217. }
  218.  
  219. header a.headlink.twitter {
  220. top: 75px;
  221. }
  222.  
  223. header a.headlink.soundcloud {
  224. top: 140px;
  225. }
  226.  
  227. header a.headlink.rss {
  228. top: 205px;
  229. }
  230.  
  231. div#footer {
  232. line-height:40px;
  233. padding: 0 25px;
  234. border: 3px solid #5996d8;
  235. border-bottom: none;
  236. background: #000;
  237. width: 800px;
  238. position: relative;
  239. left: 50%;
  240. margin-left: -430px;
  241. overflow: hidden;
  242. -webkit-border-top-left-radius: 8px;
  243. -webkit-border-top-right-radius: 8px;
  244. -moz-border-radius-topleft: 8px;
  245. -moz-border-radius-topright: 8px;
  246. border-top-left-radius: 8px;
  247. border-top-right-radius: 8px;
  248. }
  249. div#footer a, div#footer a:hover, div#footer a:visited, div#footer a:active {
  250. color: #5996d8;
  251. text-decoration: none;
  252. font-weight: bold;
  253. }
  254.  
  255. div#footer a.prevbtn {
  256. float:left;
  257. }
  258. div#footer a.nextbtn {
  259. float:right;
  260. }
  261.  
  262. </style>
  263. </head>
  264.  
  265. <body>
  266. <header>
  267.  
  268. <a class="headlink home" href="/">home</a>
  269. <a class="headlink about" href="/about">about</a>
  270. <a class="headlink soul_saga" href="/tagged/soul-saga">soul saga</a>
  271. <a class="headlink fistful_of_gun" href="/tagged/fistful-of-gun">fistful of gun</a>
  272. <a class="headlink more" href="/tagged/more">more</a>
  273. <a class="headlink steven_universe" href="/tagged/steven-universe">steven universe</a>
  274. <a class="headlink cryamore" href="/tagged/cryamore">cryamore</a>
  275. <a class="headlink aivi_surasshu" href="/tagged/aivi-%26-surasshu">aivi &amp; surasshu</a>
  276. <a class="headlink personal" href="/tagged/personal">personal</a>
  277. <a class="headlink twitter" href="http://twitter.com/surasshu">twitter</a>
  278. <a class="headlink soundcloud" href="http://soundcloud.com/surasshu">soundcloud</a>
  279. <a class="headlink rss" href="http://surasshu.com/rss">rss</a>
  280. </header>
  281. <div id="postcontainer">
  282. {block:Posts}
  283. {block:Text}
  284. <div class="post text {TagsAsClasses}">
  285. {block:Title}
  286. <h3><a href="{Permalink}">{Title}</a></h3>
  287. {/block:Title}<div class="caption">{Body}</div>
  288. </div>
  289. {/block:Text}
  290. {block:Photo}
  291. <div class="post photo {TagsAsClasses}">
  292. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  293.  
  294. {block:Caption}
  295. <div class="caption">{Caption}</div>
  296. {/block:Caption}
  297. </div>
  298. {/block:Photo}
  299. {block:Panorama}
  300. <div class="post panorama {TagsAsClasses}">
  301. {LinkOpenTag}
  302. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  303. {LinkCloseTag}{block:Caption}
  304. <div class="caption">{Caption}</div>
  305. {/block:Caption}
  306. </div>
  307. {/block:Panorama}{block:Photoset}
  308. <div class="post photoset {TagsAsClasses}">
  309. {Photoset-500}{block:Caption}
  310. <div class="caption">{Caption}</div>
  311. {/block:Caption}
  312. </div>
  313. {/block:Photoset}{block:Quote}
  314. <div class="post quote {TagsAsClasses}">
  315. "{Quote}"
  316.  
  317. {block:Source}
  318. <div class="source">{Source}</div>
  319. {/block:Source}
  320. </div>
  321. {/block:Quote}{block:Link}
  322. <div class="post link {TagsAsClasses}">
  323. <a href="{URL}" class="link" {Target}>{Name}</a>
  324.  
  325. {block:Description}
  326. <div class="description">{Description}</div>
  327. {/block:Description}
  328. </div>
  329. {/block:Link}{block:Chat}
  330. <div class="post chat {TagsAsClasses}">
  331. {block:Title}
  332. <h3><a href="{Permalink}">{Title}</a></h3>
  333. {/block:Title}
  334.  
  335. <ul class="chat">
  336. {block:Lines}
  337. <li class="{Alt} user_{UserNumber}">
  338. {block:Label}
  339. <span class="label">{Label}</span>
  340. {/block:Label}{Line}
  341. </li>
  342. {/block:Lines}
  343. </ul>
  344. </div>
  345. {/block:Chat}{block:Video}
  346. <div class="post video {TagsAsClasses}">
  347. {Video-500}{block:Caption}
  348. <div class="caption">{Caption}</div>
  349. {/block:Caption}
  350. </div>
  351. {/block:Video}{block:Audio}
  352. <div class="post audio {TagsAsClasses}">
  353. {AudioEmbed}{block:Caption}
  354. <div class="caption">{Caption}</div>
  355. {/block:Caption}
  356. </div>
  357. {/block:Audio}
  358. {/block:Posts}
  359. </div>
  360. {block:Pagination}
  361. <div id="footer">
  362. {block:PreviousPage}
  363. <a class="prevbtn" href="{PreviousPage}">Previous</a>
  364. {/block:PreviousPage}
  365.  
  366. {block:NextPage}
  367. <a class="nextbtn" href="{NextPage}">Next</a>
  368. {/block:NextPage}
  369. </div>
  370. {/block:Pagination}
  371.  
  372. </body>
  373.  
  374. </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!