API tools faq
paste
ninpen

timeline

ninpen
Nov 6th, 2014
2,145
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en"><head>
  3. <title>{Title}</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <head>
  6. <title>{Title}</title>
  7. <link rel="shortcut icon" href="{Favicon}" />
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  9.  
  10.  
  11. <style type="text/css">
  12. ::-webkit-scrollbar {width: 2px; height: 3px; border:1px solid #fff;background: #f1f1f1; }
  13. ::-webkit-scrollbar-thumb {background-color: #a4fff5;border-radius:5px;}
  14.  
  15. body,html{
  16. width:100%;
  17. height:100%;
  18. padding:0;
  19. margin:0;
  20. }
  21.  
  22. body{
  23. word-wrap: break-word;
  24. font:10px/12px trebuchet ms;
  25. color:TEXT COLOR GOES HERE;
  26. background:BACKGROUND COLOR GOES HERE url(BACKGROUND IMAGE URL GOES HERE) repeat right top fixed;
  27. }
  28.  
  29. img{
  30. max-width:100%;
  31. }
  32.  
  33. a:link, a:active, a:visited{
  34. text-decoration:none;
  35. color:LINK TEXT COLOR GOES HERE;
  36. }
  37.  
  38. a:hover {color:LINK HOVER TEXT COLOR GOES HERE;}
  39.  
  40. b,strong{color:BOLD TEXT COLOR GOES HERE;}
  41.  
  42. i,em{color:ITALICS TEXT COLOR GOES HERE;}
  43.  
  44. u{color:UNDERLINE TEXT COLOR GOES HERE;}
  45.  
  46. #top{
  47. width:467px;
  48. height:160px;
  49. position:fixed;
  50. top:0;
  51. left:50%;
  52. margin:20px 0 0 -232px;
  53. }
  54.  
  55. #desc{
  56. margin-left:20px;
  57. width:200px;
  58. height:120px;
  59. padding:10px;
  60. background:DESCRIPTION BACKGROUND COLOR GOES HERE;
  61. vertical-align: top;
  62. display:inline-block;
  63. overflow:auto;
  64. text-shadow:1px 1px 3px #ccc,-1px -1px 3px #ccc;
  65. font:italic 7px/12px trebuchet ms;
  66. letter-spacing:1px;
  67. text-transform:uppercase;
  68. border:1px solid DESCRIPTION BORDER COLOR;
  69. }
  70.  
  71. #desc img{
  72. float:left;
  73. margin:3px 10px 3px 3px;
  74. }
  75.  
  76. #nav{
  77. height:120px;
  78. overflow:auto;
  79. padding:10px;
  80. width:200px;
  81. background:NAVIGATION BACKGROUND COLOR GOES HERE;
  82. display:inline-block;
  83. border:1px solid NAVIGATION BORDER COLOR;
  84. }
  85.  
  86. #nav a{
  87. color:NAVIGATION LINK TEXT COLOR GOES HERE;
  88. font:7px/7px trebuchet ms;
  89. letter-spacing:2px;
  90. text-transform:uppercase;
  91. display:block;
  92. background:NAVIGATION LINK BACKGROUND COLOR GOES HERE;
  93. border:1px solid NAVIGATION LINK BORDER COLOR;
  94. margin-bottom:1px;
  95. padding:5px 2px;
  96. }
  97.  
  98. #nav a:hover{
  99. color:NAVIGATION LINK HOVER TEXT COLOR GOES HERE;
  100. background:NAVIGATION LINK HOVER BACKGROUND COLOR GOES HERE;
  101. border:1px solid NAVIGATION LINK HOVER BORDER COLOR;
  102. text-decoration:underline;
  103. }
  104.  
  105. #center{
  106. background:TIMELINE BACKGROUND COLOR GOES HERE url(BACKGROUND IMAGE URL GOES HERE)repeat top left;
  107. height:405px;
  108. width:100%;
  109. top:50%;
  110. left:0;
  111. margin:-130px 0 0 0;
  112. position:absolute;
  113. overflow-x:auto;
  114. border-top:10px solid TIMELINE BORDER COLOR;
  115. border-bottom:10px solid TIMELINE BORDER COLOR;
  116. box-shadow:0px 1px 0 CENTER BORDER COLOR,0px -1px 0 CENTER BORDER COLOR,inset 0 1px 0 CENTER BORDER COLOR,inset 0 -1px 0 CENTER BORDER COLOR;
  117. }
  118.  
  119. #wrap{
  120. display:block;
  121. height:400px;
  122. }
  123.  
  124. #timeline{
  125. display:block;
  126. width:100%;
  127. height:1px;
  128. background:TIMELINE LINE COLOR;
  129. position:fixed;
  130. top:50%;
  131. margin-top:69px;
  132. z-index:1;
  133. }
  134.  
  135. #timeline:before{
  136. width:11px;
  137. height:11px;
  138. background:TIMELINE COLOR;
  139. content:"";
  140. border-radius:10px;
  141. position:absolute;
  142. top:-5px;
  143. left:0;
  144. }
  145.  
  146. #timeline:after{
  147. width:11px;
  148. height:11px;
  149. background:TIMELINE COLOR;
  150. content:"";
  151. border-radius:10px;
  152. position:absolute;
  153. top:-5px;
  154. right:0;
  155. }
  156.  
  157. .entry{
  158. height:400px;
  159. color:TEXT COLOR GOES HERE;
  160. position:relative;
  161. float:left;
  162. top:0;
  163. margin:0 20px;
  164. }
  165.  
  166. .entry plus{
  167. width:6px;
  168. height:6px;
  169. border-radius:10px;
  170. border:3px solid TIMELINE DOTS BORDER COLOR;
  171. background:TIMELINE DOTS BACKGROUND COLOR GOES HERE;
  172. position:absolute;
  173. margin:182px 0 0 50px;
  174. z-index:200;
  175. }
  176.  
  177. .entry2{
  178. width:120px;
  179. height:400px;
  180. color:TEXT COLOR GOES HERE;
  181. position:relative;
  182. float:left;
  183. display:inline-block;
  184. top:0;
  185. margin:0 20px;
  186. }
  187.  
  188. .entry2 plus{
  189. width:6px;
  190. height:6px;
  191. border-radius:10px;
  192. border:3px solid TIMELINE DOTS BORDER COLOR;
  193. background:TIMELINE DOTS BACKGROUND COLOR GOES HERE;
  194. position:absolute;
  195. margin:183px 0 0 50px;
  196. z-index:1;
  197. }
  198.  
  199. .pic .date{
  200. background:DATE BACKGROUND COLOR GOES HERE;
  201. color:DATE TEXT COLOR GOES HERE;
  202. padding:0 2px;
  203. text-align:right;
  204. position:absolute;
  205. top:-12px;
  206. right:2px;
  207. font:9px/9px courier;
  208. text-transform:uppercase;
  209. letter-spacing:1px;
  210. }
  211.  
  212. .pic{
  213. padding:10px;
  214. width:50px;
  215. top:100px;
  216. left:20px;
  217. background:PORTRAIT BACKGROUND COLOR GOES HERE;
  218. position:relative;
  219. border-radius:4px;
  220. z-index:1;
  221. border:1px solid PORTRAIT BORDER COLOR;
  222. }
  223.  
  224. .pic img,.pic2 img{
  225. display:block;
  226. border-radius:3px;
  227. margin:-1px 0 0 -1px;
  228. border:1px solid PORTRAIT BORDER COLOR;
  229. }
  230.  
  231. .pic:before{
  232. z-index:-1;
  233. width:10px;
  234. height:10px;
  235. background:PORTRAIT BACKGROUND COLOR GOES HERE;
  236. position:absolute;
  237. top:64px;
  238. left:30px;
  239. content:"";
  240. -ms-transform: rotate(45deg);
  241. -moz-transform: rotate(45deg);
  242. -webkit-transform: rotate(45deg);
  243. transform: rotate(45deg);
  244. border-radius:3px;
  245. box-shadow:1px 1px 0 PORTRAIT BORDER COLOR;
  246. }
  247.  
  248. #info{
  249. width:120px;
  250. background:INFO BACKGROUND COLOR GOES HERE;
  251. position:relative;
  252. top:157px;
  253. padding-bottom:5px;
  254. float:left;
  255. border-radius:4px;
  256. }
  257.  
  258. #info span,#info2 span{
  259. width:110px;
  260. max-height:160px;
  261. display:block;
  262. background:INFO BACKGROUND COLOR GOES HERE;
  263. overflow:auto;
  264. position: relative;
  265. top: 4px;
  266. left:4px;
  267. padding:1px;
  268. font:7px/12px trebuchet ms;
  269. text-transform:uppercase;
  270. letter-spacing:1px;
  271. }
  272.  
  273. #info:after{
  274. width:10px;
  275. height:10px;
  276. background:INFO BACKGROUND COLOR GOES HERE;
  277. position:absolute;
  278. top:-4px;
  279. left:50px;
  280. content:"";
  281. -ms-transform: rotate(45deg);
  282. -moz-transform: rotate(45deg);
  283. -webkit-transform: rotate(45deg);
  284. transform: rotate(45deg);
  285. border-radius:3px;
  286. box-shadow:-1px -1px 0 INFO BORDER COLOR;
  287. }
  288.  
  289. .pic2{
  290. padding:10px;
  291. width:50px;
  292. background:PORTRAIT BACKGROUND COLOR GOES HERE;
  293. border-radius:4px;
  294. position:relative;
  295. top:230px;
  296. margin:0px 0 0 20px;
  297. border:1px solid PORTRAIT BORDER COLOR;
  298. }
  299.  
  300. .pic2:before{
  301. width:10px;
  302. height:10px;
  303. background:PORTRAIT BACKGROUND COLOR GOES HERE;
  304. position:absolute;
  305. top:-4px;
  306. left:30px;
  307. content:"";
  308. -ms-transform: rotate(45deg);
  309. -moz-transform: rotate(45deg);
  310. -webkit-transform: rotate(45deg);
  311. transform: rotate(45deg);
  312. border-radius:3px;
  313. box-shadow:-1px -1px 0 PORTRAIT BORDER COLOR;
  314. }
  315.  
  316. .pic2 .date{
  317. background:DATE BACKGROUND COLOR GOES HERE;
  318. color:DATE TEXT COLOR GOES HERE;
  319. padding:0 2px;
  320. text-align:right;
  321. position:absolute;
  322. bottom:-12px;
  323. left:2px;
  324. font:9px/9px courier;
  325. text-transform:uppercase;
  326. letter-spacing:1px;
  327. }
  328.  
  329. #info2{
  330. width:120px;
  331. bottom:230px;
  332. padding-bottom:5px;
  333. background:INFO BACKGROUND COLOR GOES HERE;
  334. position:absolute;
  335. border-radius:4px;
  336. border:1px solid #f3f3f3;
  337. }
  338.  
  339. #info2:after{
  340. width:10px;
  341. height:10px;
  342. background:INFO BACKGROUND COLOR GOES HERE;
  343. position:absolute;
  344. bottom:-4px;
  345. left:53px;
  346. content:"";
  347. -ms-transform: rotate(45deg);
  348. -moz-transform: rotate(45deg);
  349. -webkit-transform: rotate(45deg);
  350. transform: rotate(45deg);
  351. border-radius:3px;
  352. box-shadow:-1px -1px 0 INFO BORDER COLOR;
  353. }
  354. </style>
  355.  
  356.  
  357. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  358. <script src="http://www.designedbyaturtle.co.uk/demos/horizontal-scrolling/jquery.mousewheel.min.js"></script>
  359.         <script>
  360.         $(function(){
  361.                 $("#wrap").wrapInner("<table cellspacing='0'><tr>");
  362.                 $(".entry").wrap("<td></td>");
  363.    $("body").mousewheel(function(event, delta) {
  364.  
  365.       this.scrollLeft -= (delta * 30);
  366.    
  367.       event.preventDefault();
  368.  
  369.    });
  370.  
  371.         });
  372.         </script>
  373.  
  374. </head>
  375. <body>
  376.    
  377.    
  378.    
  379.  
  380.  
  381. <div id="top">
  382. <div id="nav">
  383. <a href="/">Go back</a>
  384. <a href="/ask">Message</a>
  385. <a href="/archive">Archives</a>
  386. <a href="http://ninpen.tumblr.com/">Credit</a>
  387. <a href="LINK URL GOES HERE">LINK NAME GOES HERE</a>
  388. <a href="LINK URL GOES HERE">LINK NAME GOES HERE</a>
  389. </div>  
  390.    
  391.    
  392. <div id="desc">
  393. <img src="DESCRIPTION IMAGE URL GOES HERE"> DESCRIPTION WILL GO HERE
  394. </div>
  395. </div>  
  396.  
  397.    
  398.    
  399. <div id="center">
  400. <div id="timeline"></div>
  401. <div id="wrap">
  402.  
  403. <td>
  404. <div class="entry">
  405. <plus></plus>
  406. <div class="pic"><img src="TIMELINE PORTRAIT IMAGE URL GOES HERE">
  407. <div class="date">(DATE WILL GO HERE. KEEP IT IN SHORT DATE FORMAT [EX: DEC 25])</div>
  408. </div>
  409. <div id="info">
  410. <span>FILLER TEXT WILL GO HERE</span>
  411. </div>    
  412. </div>  
  413. </td>
  414.  
  415.  
  416. <td>
  417. <div class="entry2">
  418. <plus></plus>
  419. <div class="pic2"><img src="TIMELINE PORTRAIT IMAGE URL GOES HERE">
  420. <div class="date">(DATE WILL GO HERE. KEEP IT IN SHORT DATE FORMAT [EX: DEC 25])</div>
  421. </div>
  422. <div id="info2">
  423. <span>FILLER TEXT WILL GO HERE</span>
  424. </div>  
  425. </div>  
  426. </td>
  427.  
  428.  
  429.  
  430. <td>
  431. <div class="entry">
  432. <plus></plus>
  433. <div class="pic"><img src="TIMELINE PORTRAIT IMAGE URL GOES HERE">
  434. <div class="date">(DATE WILL GO HERE. KEEP IT IN SHORT DATE FORMAT [EX: DEC 25])</div>
  435. </div>
  436. <div id="info">
  437. <span>FILLER TEXT WILL GO HERE</span>
  438. </div>    
  439. </div>  
  440. </td>
  441.  
  442.  
  443. <td>
  444. <div class="entry2">
  445. <plus></plus>
  446. <div class="pic2"><img src="TIMELINE PORTRAIT IMAGE URL GOES HERE">
  447. <div class="date">(DATE WILL GO HERE. KEEP IT IN SHORT DATE FORMAT [EX: DEC 25])</div>
  448. </div>
  449. <div id="info2">
  450. <span>FILLER TEXT WILL GO HERE</span>
  451. </div>  
  452. </div>  
  453. </td>
  454.  
  455.  
  456.  
  457. <td>
  458. <div class="entry">
  459. <plus></plus>
  460. <div class="pic"><img src="TIMELINE PORTRAIT IMAGE URL GOES HERE">
  461. <div class="date">(DATE WILL GO HERE. KEEP IT IN SHORT DATE FORMAT [EX: DEC 25])</div>
  462. </div>
  463. <div id="info">
  464. <span>FILLER TEXT WILL GO HERE </span>
  465. </div>    
  466. </div>  
  467. </td>
  468.  
  469.  
  470. <td>
  471. <div class="entry2">
  472. <plus></plus>
  473. <div class="pic2"><img src="TIMELINE PORTRAIT IMAGE URL GOES HERE">
  474. <div class="date">(DATE WILL GO HERE. KEEP IT IN SHORT DATE FORMAT [EX: DEC 25])</div>
  475. </div>
  476. <div id="info2">
  477. <span>FILLER TEXT WILL GO HERE</span>
  478. </div>  
  479. </div>  
  480. </td>
  481.  
  482.  
  483.  
  484. <td>
  485. <div class="entry">
  486. <plus></plus>
  487. <div class="pic"><img src="TIMELINE PORTRAIT IMAGE URL GOES HERE">
  488. <div class="date">(DATE WILL GO HERE. KEEP IT IN SHORT DATE FORMAT [EX: DEC 25])</div>
  489. </div>
  490. <div id="info">
  491. <span>FILLER TEXT WILL GO HERE</span>
  492. </div>    
  493. </div>  
  494. </td>
  495.  
  496.  
  497. <td>
  498. <div class="entry2">
  499. <plus></plus>
  500. <div class="pic2"><img src="TIMELINE PORTRAIT IMAGE URL GOES HERE">
  501. <div class="date">(DATE WILL GO HERE. KEEP IT IN SHORT DATE FORMAT [EX: DEC 25])</div>
  502. </div>
  503. <div id="info2">
  504. <span>FILLER TEXT WILL GO HERE</span>
  505. </div>  
  506. </div>  
  507. </td>
  508.  
  509.  
  510.  
  511. <td>
  512. <div class="entry">
  513. <plus></plus>
  514. <div class="pic"><img src="TIMELINE PORTRAIT IMAGE URL GOES HERE">
  515. <div class="date">(DATE WILL GO HERE. KEEP IT IN SHORT DATE FORMAT [EX: DEC 25])</div>
  516. </div>
  517. <div id="info">
  518. <span>FILLER TEXT WILL GO HERE</span>
  519. </div>    
  520. </div>  
  521. </td>
  522.  
  523.  
  524. <td>
  525. <div class="entry2">
  526. <plus></plus>
  527. <div class="pic2"><img src="TIMELINE PORTRAIT IMAGE URL GOES HERE">
  528. <div class="date">(DATE WILL GO HERE. KEEP IT IN SHORT DATE FORMAT [EX: DEC 25])</div>
  529. </div>
  530. <div id="info2">
  531. <span>FILLER TEXT WILL GO HERE</span>
  532. </div>  
  533. </div>  
  534. </td>
  535.  
  536.  
  537.  
  538.    
  539.  
  540. </div>
  541. </div>    
  542.  
  543. </body>
  544. </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!