API tools faq
paste
Advertisement
thanksamber

Page 002

thanksamber
Jan 2nd, 2016
1,569
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.30 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- macfustythemes -->
  4. <head>
  5. <title>{Title}</title>
  6. {block:Description}
  7. <meta name="description" content="{MetaDescription}">
  8. {/block:Description}
  9.  
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/01wstkc/Bvdnq7h99/jquery.fullpage.css" />
  14. <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  15.  
  16. <!-- HTML5 Shiv -->
  17. <!--[if lt IE 9]>
  18. <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
  19. <![endif]-->
  20.  
  21. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  22. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  23. <script>
  24. var goal = 100;
  25. var completed = 47;
  26. $(document).ready(function() {
  27. calculateCompletion(goal,completed);
  28. });
  29. function calculateCompletion (total,progress) {
  30. var percentage = Math.round(progress/total*100);
  31. var totalWidth = $("#tracker").width();
  32. var progressWidth = totalWidth * percentage/100;
  33. $("#progressbar").animate({width: progressWidth + "px"},1500);
  34. $("#progresslabel").append(percentage + "% completed");
  35. };
  36. </script>
  37.  
  38. <style>
  39.  
  40. body {
  41. background-color: #fff;
  42. color: #333;
  43. font-family: 'Calibri', sans-serif;
  44. font-size: 11px;
  45. }
  46.  
  47. a {
  48. color: #315f7a;
  49. text-decoration: none;
  50. }
  51.  
  52. a:hover {
  53. color: #333;
  54. }
  55.  
  56. #clear {
  57. clear: both;
  58. }
  59.  
  60. #trackercontainer {
  61. position: absolute;
  62. right: 0px;
  63. top: 25px;
  64. right: 15px;
  65. }
  66.  
  67. #tracker {
  68. position: relative;
  69. width: 100px;
  70. height: 5px;
  71. margin: 0 auto;
  72. border: 2px solid #fff;
  73. padding: 3px;
  74. }
  75.  
  76. #progressbar {
  77. width: 0;
  78. height: 100%;
  79. background-color: #fff;
  80. }
  81.  
  82. #progresslabel {
  83. text-align: right;
  84. font-size: 10px;
  85. text-transform: uppercase;
  86. margin-top: -15px;
  87. }
  88.  
  89. #content {
  90. position: relative;
  91. width: 711px;
  92. margin: 150px auto;
  93. }
  94.  
  95. #header {
  96. width: 711px;
  97. }
  98.  
  99. h1 {
  100. float: left;
  101. font-family: 'Montserrat', sans-serif;
  102. color: #333;
  103. font-size: 36px;
  104. text-transform: uppercase;
  105. }
  106.  
  107. #nav {
  108. margin-top: 45px;
  109. float: right;
  110. font-size: 11px;
  111. text-transform: uppercase;
  112. }
  113.  
  114. #todo {
  115. width: 100%;
  116. height: 417px;
  117. border: 5px solid #333;
  118. overflow: auto;
  119. float: left;
  120. }
  121.  
  122. #todo::-webkit-scrollbar-track
  123. {
  124. background-color: #f0f0f0;
  125. }
  126.  
  127. #todo::-webkit-scrollbar
  128. {
  129. width: 10px;
  130. }
  131.  
  132. #todo::-webkit-scrollbar-thumb
  133. {
  134. background-color: #333;
  135. border: 2px solid #f0f0f0;
  136. }
  137.  
  138. #todo::-webkit-scrollbar-button:vertical:decrement {
  139. height: 70px;
  140. background-color: #333;
  141. }
  142.  
  143.  
  144. #topbar {
  145. position: fixed;
  146. width: 666px;
  147. height: 50px;
  148. padding: 10px 20px;
  149. background-color: #333;
  150. font-family: 'Montserrat', sans-serif;
  151. text-transform: uppercase;
  152. font-size: 18px;
  153. color: #fff;
  154. line-height: 50px;
  155. z-index: 999;
  156. }
  157.  
  158. #sidebar {
  159. position: fixed;
  160. width: 160px;
  161. height: 300px;
  162. margin-top: 70px;
  163. padding: 20px;
  164. background-color: #333;
  165. text-align: justify;
  166. color: #f0f0f0;
  167. border: 3px solid #fff;
  168. }
  169.  
  170. #listcontainer {
  171. margin: 73px 0 0 206px;
  172. width: 495px;
  173. }
  174.  
  175. #listcontainer ul {
  176. position: relative;
  177. padding: 0;
  178. float: left;
  179. margin: 0 3px 3px 0;
  180. }
  181.  
  182. #listcontainer ul img {
  183. width: 162px;
  184. height: 250px;
  185. display: block;
  186. }
  187.  
  188. #listcontainer ul li {
  189. list-style-type: none;
  190. width: 142px;
  191. height: 230px;
  192. padding: 10px;
  193. background-color: #333;
  194. color: #f0f0f0;
  195. text-align: justify;
  196. }
  197.  
  198. h3 {
  199. text-align: center;
  200. font-size: 20px;
  201. font-family: 'Montserrat', sans-serif;
  202. text-transform: uppercase;
  203. }
  204.  
  205. #listcontainer ul li ul {
  206. position: absolute;
  207. top: 0;
  208. left: 0;
  209. -moz-transition: all 0.5s ease;
  210. -o-transition: all 0.5s ease;
  211. -webkit-transition: all 0.5s ease;
  212. transition: all 0.5s ease;
  213. }
  214.  
  215. #listcontainer ul li ul li {
  216. padding: 0;
  217. }
  218.  
  219. #listcontainer ul li ul:hover {
  220. opacity: 0;
  221. }
  222.  
  223. </style>
  224. </head>
  225. <body>
  226. <div id="content">
  227. <div id="header"><h1>Work In progress</h1>
  228. <div id="nav">
  229. <a href="/">Home</a> -
  230. <a href="/ask">Message</a> -
  231. <a href="/">Link 1</a> -
  232. <a href="/">Link 2</a> -
  233. <a href="/">Link 3</a> -
  234. <a href="http://macfustythemes.tumblr.com/">Theme</a>
  235. </div>
  236. <div id="clear"></div>
  237. </div>
  238. <div id="todo">
  239. <div id="topbar">To Do List
  240. <div id="trackercontainer">
  241. <div id="tracker"><div id="progressbar"></div></div>
  242. <div id="progresslabel"></div>
  243. </div>
  244. </div>
  245. <div id="sidebar">Include a short description of your list here. Remember to update the tracker above with your progress to show how close you are to completion.</div>
  246. <div id="listcontainer">
  247. <ul>
  248. <li><h3>List Item</h3>
  249. Include list items here with or without an image to track your projects or your to do list. Images should be 162px x 250px.
  250. </li>
  251. </ul>
  252. <ul>
  253. <li><h3>Jessica Jones</h3>
  254. Donec lacinia, dolor vel fermentum feugiat, velit libero dapibus ligula, quis tempor nunc orci in nisi. Nullam tempus dictum dui a ultrices. In molestie felis elit, ut egestas massa tristique ac. Donec sagittis imperdiet rhoncus.
  255. <ul><li><img src="http://41.media.tumblr.com/cd52bfc5f0c5bfc3d00954dd6766affd/tumblr_np3mmurziT1qab0apo1_1280.jpg"></li></ul>
  256. </li>
  257. </ul>
  258. <ul>
  259. <li><h3>Mr. Robot</h3>
  260. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum, lacus id vehicula condimentum, velit libero tempor lacus, at fermentum diam neque eget dui. Curabitur pretium lectus quis dui pretium porttitor. Mauris tincidunt maximus nulla eget pellentesque.
  261. <ul><li><img src="https://posterspy.com/wp-content/uploads/2015/08/98e7a528393099.55be179cc8853.jpg"></li></ul>
  262. </li>
  263. </ul>
  264. <ul>
  265. <li><h3>Parks and Recreation</h3>
  266. Proin quis libero libero. Aliquam rhoncus ex a posuere aliquam. Donec iaculis lectus ac sagittis tristique. Praesent eget neque tristique, bibendum sapien ut, gravida ex. Sed sodales et neque at tincidunt.
  267. <ul><li><img src="http://images.moviepostershop.com/parks-and-recreation-tv-movie-poster-2009-1020482255.jpg"></li></ul>
  268. </li>
  269. </ul>
  270. <ul>
  271. <li><h3>Archer</h3>
  272. Fusce iaculis metus felis, sit amet mollis velit placerat ac. Nunc semper nec neque vel varius. Pellentesque sit amet facilisis dui. Aliquam sed aliquam orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tincidunt aliquam dignissim.
  273. <ul><li><img src="http://vignette4.wikia.nocookie.net/archer/images/5/50/Archer_Poster_03.jpg/revision/latest?cb=20150317232511"></li></ul>
  274. </li>
  275. </ul>
  276. <ul>
  277. <li><h3>Vikings</h3>
  278. Pellentesque molestie fringilla sollicitudin. Morbi sagittis mattis leo in semper. Nam sit amet commodo orci, ut accumsan tellus. Etiam nec turpis eu quam lacinia molestie. Fusce vulputate dolor a nunc varius dapibus.
  279. <ul><li><img src="http://www.seat42f.com/wp-content/uploads/2014/01/Vikings-Season-2-Poster.jpg"></li></ul>
  280. </li>
  281. </ul>
  282. </div>
  283. </div>
  284. </div>
  285. </body>
  286. </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!