API tools faq
paste
septims

Anthology Page

septims
Jan 27th, 2015
2,306
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.16 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. theme by septim
  4.  
  5. -->
  6.  
  7.  
  8. <!DOCTYPE html>
  9. <head>
  10.  
  11. <title>{Title}</title>
  12.  
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15.  
  16.  
  17. <!-- jquery -->
  18.  
  19.  
  20. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  21.  
  22. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  23.  
  24. <script>
  25.  
  26. (function($){
  27.  
  28. $(document).ready(function(){
  29.  
  30. $("a[title]").style_my_tooltips({
  31.  
  32. tip_follows_cursor:true,
  33.  
  34. tip_delay_time:30,
  35.  
  36. tip_fade_speed:300,
  37.  
  38. attribute:"title"
  39.  
  40. });
  41.  
  42. });
  43.  
  44. })(jQuery);
  45.  
  46. </script>
  47.  
  48. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  49.  
  50. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  51.  
  52. <script type="text/javascript">
  53. $(document).ready(function() {
  54. var $container = $('.section');
  55. // initialize
  56. $container.masonry({
  57. columnWidth: 235,
  58. itemSelector: '.section_chunk'
  59. });
  60. });
  61. </script>
  62.  
  63. <!--CSS customization here. -->
  64.  
  65. <style type="text/css">
  66.  
  67. #s-m-t-tooltip{
  68. font-size:8px;
  69. position:absolute;
  70. margin:25px 15px;
  71. letter-spacing:1px;
  72. z-index:9999;
  73. background:white;
  74. text-transform:uppercase;
  75. padding:2px 3px;
  76. }
  77.  
  78.  
  79. /*scrollbar*/
  80. ::-webkit-scrollbar{
  81. height: 3px;
  82. width: 3px;
  83. }
  84.  
  85. ::-webkit-scrollbar-thumb{background-color:black;}
  86.  
  87. ::-webkit-scrollbar-track{background-color:transparent;}
  88.  
  89. /*main structure*/
  90.  
  91. blockquote {padding:5px 0 5px 30px;
  92. border-left:1px solid #f3f3f3;
  93. margin-left:0;
  94. }
  95.  
  96. body {
  97. color:black;
  98. font-family:helvetica, sans-serif;
  99. font-size:10px;
  100. text-align:center;
  101. margin:0;
  102. background:#F3F3F3;
  103. line-height:180%;
  104. }
  105.  
  106.  
  107. a {
  108. color:black;
  109. text-decoration:none;
  110. }
  111.  
  112. a:hover {color:black;
  113. text-decoration:none;}
  114.  
  115. img{
  116. opacity:1;
  117. border:none;
  118. text-decoration:none}
  119.  
  120. #con {
  121. position:relative;
  122. width:600px;
  123. margin:100px auto;
  124. }
  125.  
  126. #title {
  127. font-size:40px;
  128. text-align:left;
  129. font-weight:300;
  130. margin-bottom:50px;
  131. width:510px;
  132. margin-left:190px;
  133. }
  134.  
  135. #content {
  136. background:white;
  137. padding:40px 30px;
  138. width:470px;
  139. margin-left:150px;
  140. color:#969696;
  141. -webkit-animation-name: fade-in;
  142. -webkit-animation-duration: 2s;
  143. }
  144.  
  145. #content a {color:#969696;}
  146.  
  147. #content a:hover {color:black;}
  148.  
  149. .section {
  150. position:relative;
  151. border-bottom:1px solid #f3f3f3;
  152. margin-bottom:40px;
  153. padding-bottom:20px;
  154. }
  155.  
  156. .section_title {
  157. position:absolute;
  158. width:200px;
  159. text-align:right;
  160. left:-280px;
  161. top:0px;
  162. color:#888;
  163. font-size:25px;
  164. font-weight:300;
  165. }
  166.  
  167. .section_chunk {
  168. display:inline-block;
  169. float:left;
  170. width:215px;
  171. margin:0 10px 20px 10px;
  172. font-size:12px;
  173. text-align:left;
  174. font-weight:300;
  175. line-height:180%;
  176. }
  177.  
  178. .bold {
  179. font-weight:400;
  180. display:block;
  181. color:black;
  182. font-size:16px;
  183. margin-bottom:10px;
  184. text-transform:capitalize;
  185. }
  186.  
  187. .section_chunk a {
  188. text-transform:capitalize;
  189. position:relative;
  190. margin-right:0px;
  191. }
  192.  
  193. .section_chunk a:hover::after {color:#969696!important;}
  194.  
  195. .section_chunk a:after {
  196. content:'//';
  197. padding-left:3px;
  198. }
  199.  
  200. .section_chunk a:last-of-type::after {display:none;}
  201.  
  202. .ho a {
  203. text-transform:uppercase;
  204. font-size:8px;
  205. margin:0 3px;
  206. }
  207.  
  208. @-webkit-keyframes fade-in {
  209. 0% { opacity: 0; }
  210. 50% { opacity: 0; }
  211. 100% { opacity: 1; }
  212.  
  213. </style>
  214.  
  215.  
  216.  
  217. </head>
  218.  
  219.  
  220.  
  221. <body>
  222.  
  223.  
  224. <div id="con">
  225. <div id="title">Navigation</div>
  226. <div id="content">
  227. <!--first section-->
  228. <div class="section">
  229. <div class="section_title">Personal </div>
  230. <div class="section_chunk">
  231. <span class="bold">Profile</span>
  232. Want to get to know me better?<br>
  233. <a href="">About me</a>
  234. <a href="">Posts I relate to</a>
  235. <a href="">Favorite Posts</a>
  236. <a href="">Appearance</a>
  237. </div>
  238. <div class="section_chunk">
  239. <span class="bold">Social Media</span>
  240. You can find me on the web elsewhere:<br>
  241. <a href="">instagram</a>
  242. <a href="">twitter</a>
  243. <a href="">goodreads</a>
  244. <a href="">Ello</a>
  245. </div>
  246. <div class="section_chunk">
  247. <span class="bold">Other blogs</span>
  248. Other places where I run the show:<br>
  249. <a href="">Fandom blog</a>
  250. <a href="">Fashion and art</a>
  251. <a href="">Kpop</a>
  252. </div>
  253. <div class="section_chunk">
  254. <span class="bold">Recommended People</span>
  255. These people run wonderful blogs:<br>
  256. <a href="">Jane Doe</a>
  257. <a href="">John Doe</a>
  258. <a href="">Richard III</a>
  259. <a href="">Othello</a>
  260. </div>
  261. </div>
  262. <!--end first section-->
  263. <!--second section-->
  264. <div class="section">
  265. <div class="section_title">Works</div>
  266. <div class="section_chunk">
  267. <span class="bold">Graphics</span>
  268. I don't know how to make these:<br>
  269. <a href="">Fandom</a>
  270. <a href="">Book</a>
  271. <a href="">TV Show</a>
  272. <a href="">Assorted things</a>
  273. <a href="">Strange People</a>
  274. </div>
  275. <div class="section_chunk">
  276. <span class="bold">Edits</span>
  277. Trying to find the perfect balance:<br>
  278. <a href="">Bands</a>
  279. <a href="">Another TV Show</a>
  280. <a href="">Some Movie</a>
  281. <a href="">More Films</a>
  282. <a href="">Perhaps an actor</a>
  283. </div>
  284. <div class="section_chunk">
  285. <span class="bold">Picspams</span>
  286. What exactly are these:<br>
  287. <a href="">Favorite character</a>
  288. <a href="">some astrology thing</a>
  289. <a href="">Maybe by color</a>
  290. <a href="">Oh look another character</a>
  291. </div>
  292. <div class="section_chunk">
  293. <span class="bold">Gifs</span>
  294. Other places where I run the show:
  295. <a href="">Fandom blog</a>
  296. <a href="">Fashion and art</a>
  297. <a href="">Kpop</a>
  298. </div>
  299. </div>
  300. <!--end second section-->
  301. <!--third section-->
  302. <div class="section">
  303. <div class="section_title">Tags</div>
  304. <div class="section_chunk">
  305. <span class="bold">Photography</span>
  306. <a href="">all Photography</a>
  307. <a href="">Landscape</a>
  308. <a href="">Seascape</a>
  309. <a href="">Architecture</a>
  310. <a href="">Portrait</a>
  311. <a href="">The Human Body</a>
  312. </div>
  313. <div class="section_chunk">
  314. <span class="bold">Art</span>
  315. <a href="">All art</a>
  316. <a href="">Collage</a>
  317. <a href="">Sculpture</a>
  318. <a href="">Fashion</a>
  319. </div>
  320. <div class="section_chunk">
  321. <span class="bold">TV Shows</span>
  322. I watch these religiously:<br>
  323. <a href="">Hannibal</a>
  324. <a href="">Orange is the New Black</a>
  325. <a href="">House of Cards</a>
  326. <a href="">Game of Thrones</a>
  327. </div>
  328. <div class="section_chunk">
  329. <span class="bold">Film</span>
  330. <a href="">Stoker</a>
  331. <a href="">Drive</a>
  332. <a href="">The Fall</a>
  333. <a href="">The Talented Mr. Ripley</a>
  334. <a href="">Blade Runner</a>
  335. <a href="">Gone Girl</a>
  336. </div>
  337. <div class="section_chunk">
  338. <span class="bold">Music</span>
  339. <a href="">All music</a>
  340. <a href="">Favorite Band</a>
  341. <a href="">Kpop</a>
  342. </div>
  343. <div class="section_chunk">
  344. <span class="bold">Words</span>
  345. I never seem to have enough:<br>
  346. <a href="">Literature</a>
  347. <a href="">Quotes</a>
  348. <a href="">Books You want to read</a>
  349. </div>
  350. <div class="section_chunk">
  351. <span class="bold">miscellaneous</span>
  352. Everything but the kitchen sink:<br>
  353. <a href="">History</a>
  354. <a href="">Science</a>
  355. <a href="">Space</a>
  356. <a href="">Places You want to visit</a>
  357. </div>
  358. </div>
  359. <!--end third section-->
  360. <span class="ho"><a href="/">home</a><a href="/ask">Contact</a><a href="/archive">Archive</a><a href="http://farahmir.tumblr.com">Theme</a></span>
  361. </div>
  362. </div>
  363.  
  364.  
  365.  
  366.  
  367. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!