API tools faq
paste
Advertisement
Kalleye

The "books i've read' theme

Kalleye
Sep 29th, 2012
1,907
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!-- BOOKS I'VE READ THEME MADE BY THEDAUGHTEROFVALENTINE
  3.  
  4. ___________________________________________________________________________
  5.  
  6. -----------------------------------RULES-----------------------------------
  7. ___________________________________________________________________________
  8.  
  9. By using this theme you agree to have read and follow the terms and conditions.
  10.  
  11. 01. DO NOT REMOVE CREDITS
  12. 02. DO NOT USE THIS THEME AS A BASE FOR YOUR OWN THEME
  13. 03. DO NOT STEAL
  14. 04. DO NOT REDISTRUBTE AS YOUR OWN THEME
  15.  
  16. If you delete credits, use as a base or redistribute as your own I swear on the Angel I will hunt you down and you will meet my parabatai’s grenade launcher.
  17.  
  18. ___________________________________________________________________________
  19.  
  20. --------------------------------HOW TO USE---------------------------------
  21. ___________________________________________________________________________
  22.  
  23. Template was oryginally made for "Books I've read" / "Books of XXX year" but it's okey if you use it for any other page like "movie challenger" as well.
  24.  
  25.  
  26. ---------------------------------IMPORTANT---------------------------------
  27. Becasue there is no 'customize page', process of changing colors is a little bit tricky. It was made as easy as possible to be changed, all places where you can change
  28.  
  29. colors are tagged.
  30.  
  31. There is some instruction YOU HAVE TO follow to make the theme look right. I've created some classes:
  32. ff-item-type-1 - re-readed books
  33. ff-item-type-2 - favorite books
  34. ff-item-type-3 - five star rated books
  35. ff-item-type-4 - four star rated books
  36. ff-item-type-5 - three star rated books
  37. ff-item-type-6 - two star rated books
  38. ff-item-type-7 - one star rated books
  39.  
  40. And if you want to put book as "re-read" you have to paste "ff-item-type-1" in the line (<li class=" ">) suitable for the book.
  41. There is way to put book in two or more categories. Instead of "ff-item-type-X" you have to paste eg "ff-item-type-1 & ff-item-type-4".
  42.  
  43. If you have any questions about using this theme, have any problems with it or there is something you don't understand message me. It would be better for you (and me)
  44.  
  45. if you write to me as non anon. I can help better.
  46.  
  47. -->
  48.  
  49.  
  50. <html>
  51.  
  52. <head>
  53. <title>{Title}</title>
  54.  
  55. <script src="http://static.tumblr.com/jmc3mkz/0xlm9gk0e/modernizr.custom.29473.js"></script>
  56.  
  57. <link rel="shortcut icon" href="{Favicon}">
  58. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  59.  
  60. <style type="text/css">
  61.  
  62. ::-webkit-scrollbar {
  63. width: 4px;
  64. height: 4px;
  65. background: #ffffff; /* Edit here to change background behind the scrollbar */}
  66.  
  67. ::-webkit-scrollbar-thumb {
  68. width: 4px;
  69. height: 4px;
  70. background: #6cc4db; /* Edit here to change scrollbar color */}
  71.  
  72. body, html {
  73. margin: 0 auto;
  74. padding: 0px;
  75. background: #ffffff; /* Edit here to change background color */
  76.  
  77. }
  78.  
  79. .book {
  80. width: 160px;
  81. height: 241px;}
  82.  
  83. #containter {
  84. width: 1200px;
  85. margin: auto;}
  86.  
  87. #header {
  88. margin: auto;
  89. width: 1030px;
  90. text-align:center;}
  91.  
  92.  
  93. #paragraph1 {
  94. margin-top: 40px;}
  95.  
  96. #line1 {
  97. margin-top: 19px;
  98. width: 490px;
  99. height: 1px;
  100. background: #f4f4f4; /* Edit here to change color of the line in header */
  101. float:left;}
  102.  
  103. #avatar{
  104. margin-left: 5px;
  105. margin-right: 5px;
  106. float:left;}
  107.  
  108. .avatar {
  109. padding: 4px;
  110. border: 1px solid #f4f4f4; /* Edit here to change color of avatar's border */}
  111.  
  112. #paragraph2 {
  113. font-family: Calibri, Arial, Helvetica, sans-serif;
  114. letter-spacing: 3px;
  115. text-transform: uppercase;
  116. font-weight: normal;
  117. color: #6cc4db; /* Edit here to change color of title */
  118. font-size: 30px;
  119. clear:both;}
  120.  
  121. #line-bottom {
  122. width: 1030px;
  123. height: 1px;
  124. background: #f4f4f4; /* Edit here to change color of the line in header (I advise you to put the same color here as you put in #line1*/
  125. margin-top: 20px;
  126. margin-bottom: 20px;}
  127.  
  128. #menu {
  129. margin-left: 83px;}
  130.  
  131. .menu {
  132. letter-spacing: 1px;
  133. width: 76px;
  134. margin-left: 2px;
  135. margin-right: 2px;
  136. text-transform: uppercase;
  137. font-family: Calibri, Arial, Helvetica, sans-serif;
  138. padding: 6px;
  139. cursor: pointer;
  140. color: #6cc4db; /* Edit here to change text color of buttons */
  141. font-size: 11px;
  142. background: #ffffff; /* Edit here to change background color of buttons */
  143. text-align:center;
  144. border: 1px solid #f4f4f4; /* Edit here to change color of buttons' border */
  145. float:left;}
  146.  
  147. .menu a {
  148. color: #6cc4db; /* Edit here to change text color of buttons */
  149. text-decoration:none;}
  150.  
  151.  
  152. .ff-container{
  153. width: 1200px;
  154. margin:auto;
  155. padding-bottom: 25px;
  156. display: block;}
  157.  
  158. .ff-container label{
  159. letter-spacing: 1px;
  160. width: 76px;
  161. margin-left: 2px;
  162. margin-right: 2px;
  163. text-transform: uppercase;
  164. font-family: Calibri, Arial, Helvetica, sans-serif;
  165. padding: 6px;
  166. cursor: pointer;
  167. color: #6cc4db; /* Edit here to change text color of buttons */
  168. font-size: 11px;
  169. background: #ffffff; /* Edit here to change background color of buttons */
  170. text-align:center;
  171. border: 1px solid #f4f4f4; /* Edit here to change color of buttons' border */
  172. float:left;}
  173.  
  174. .ff-container label.ff-label-type-all{}
  175.  
  176.  
  177. .ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
  178. .ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
  179. .ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
  180. .ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3,
  181. .ff-container input.ff-selector-type-4:checked ~ label.ff-label-type-4,
  182. .ff-container input.ff-selector-type-5:checked ~ label.ff-label-type-5,
  183. .ff-container input.ff-selector-type-6:checked ~ label.ff-label-type-6,
  184. .ff-container input.ff-selector-type-7:checked ~ label.ff-label-type-7{
  185. background: #f4f4f4; /* Edit here to change background color of active button */
  186. color: #6cc4db; /* Edit here to change text color of active button */
  187. border: 1px solid #f4f4f4; /* Edit here to change border color of active button */}
  188.  
  189. .ff-container input{
  190. display: none;
  191. }
  192. .ff-items{
  193. list-type:none;
  194. position: relative;
  195. margin: 0px auto;
  196. padding-top: 0px;
  197. padding-bottom: 30px;
  198. }
  199.  
  200. .ff-items div.image{
  201. display: block;
  202. position: relative;
  203. padding: 4px;
  204. background: #ffffff; /* Edit here to change background of image borders */
  205. border: 1px solid #f4f4f4; /* Edit here to change border's color */
  206. margin: 17px;
  207. width: 160px;
  208. height: 241px;
  209. }
  210.  
  211.  
  212. .ff-items .hoverme{
  213. display: block;
  214. background: rgba(0,0,0, 0.6); /* Edit here to change background of hover on image */
  215. color: #fff; /* Edit here to change color*/
  216. position: absolute;
  217. bottom: 4px;
  218. left: 4px;
  219. width: 160px;
  220. height: 241px;
  221. overflow: hidden;
  222. opacity: 0;
  223. font-size:11px;
  224. text-align: center;
  225. text-shadow: 1px 1px 1px #303857;
  226. -webkit-transition: all 0.5s ease-out;
  227. -moz-transition: all 0.5s ease-out;
  228. -o-transition: all 0.5s ease-out;
  229. -ms-transition: all 0.5s ease-out;
  230. transition: all 0.5s ease-out;
  231. }
  232. .ff-items .image:hover .hoverme{
  233. width:160px;
  234. font-size:11px;
  235. height: 241px;
  236. opacity: 1;
  237. }
  238.  
  239. .ff-items li img{
  240. display: block;
  241. }
  242.  
  243. .ff-items li{
  244. margin: 10px;
  245. float: left;
  246. width: 160px;
  247. height: 241px;
  248. -webkit-transition: all 0.6s ease-in-out;
  249. -moz-transition: all 0.6s ease-in-out;
  250. -o-transition: all 0.6s ease-in-out;
  251. -ms-transition: all 0.6s ease-in-out;
  252. transition: all 0.6s ease-in-out;
  253. }
  254. .ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
  255. .ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
  256. .ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3,
  257. .ff-container input.ff-selector-type-4:checked ~ .ff-items .ff-item-type-4,
  258. .ff-container input.ff-selector-type-5:checked ~ .ff-items .ff-item-type-5,
  259. .ff-container input.ff-selector-type-6:checked ~ .ff-items .ff-item-type-6,
  260. .ff-container input.ff-selector-type-7:checked ~ .ff-items .ff-item-type-7{
  261. opacity: 1;
  262. -webkit-transform: scale(1.0);
  263. -moz-transform: scale(1.0);
  264. -o-transform: scale(1.0);
  265. -ms-transform: scale(1.0);
  266. transform: scale(1.0);
  267. }
  268. .ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
  269. .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
  270. .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3),
  271. .ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4),
  272. .ff-container input.ff-selector-type-5:checked ~ .ff-items li:not(.ff-item-type-5),
  273. .ff-container input.ff-selector-type-6:checked ~ .ff-items li:not(.ff-item-type-6),
  274. .ff-container input.ff-selector-type-7:checked ~ .ff-items li:not(.ff-item-type-7){
  275. opacity: 0.1;
  276. -webkit-transform: scale(0.7);
  277. -moz-transform: scale(0.7);
  278. -o-transform: scale(0.7);
  279. -ms-transform: scale(0.7);
  280. transform: scale(0.7);
  281. }
  282. .ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span,
  283. .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,
  284. .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span,
  285. .ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4) span,
  286. .ff-container input.ff-selector-type-5:checked ~ .ff-items li:not(.ff-item-type-5) span,
  287. .ff-container input.ff-selector-type-6:checked ~ .ff-items li:not(.ff-item-type-6) span,
  288. .ff-container input.ff-selector-type-7:checked ~ .ff-items li:not(.ff-item-type-7) span{
  289. display:none;
  290. }
  291.  
  292. .ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) div.hoverme,
  293. .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) div.hoverme,
  294. .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) div.hoverme,
  295. .ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4) div.hoverme,
  296. .ff-container input.ff-selector-type-5:checked ~ .ff-items li:not(.ff-item-type-5) div.hoverme,
  297. .ff-container input.ff-selector-type-6:checked ~ .ff-items li:not(.ff-item-type-6) div.hoverme,
  298. .ff-container input.ff-selector-type-7:checked ~ .ff-items li:not(.ff-item-type-7) div.hoverme{
  299. display:none;
  300. }
  301.  
  302. ol,ul {
  303. list-style:none; width: 1200px;
  304. }
  305. .clr {clear:both;}
  306.  
  307. .title-of-book {
  308. border-bottom: 1px solid #ffffff;
  309. padding: 7px;
  310. margin-left: 10px;
  311. margin-right: 10px;
  312. margin-top:0px;
  313. margin-bottom:0px;
  314. font-weight:bold;
  315. font-size:16px;
  316. color: #ffffff; /* Edit here to change color of book title */
  317. text-shadow: 1px 0px 0px #000000; /* Edit here to change color of shadow */
  318. font-family: Georgia;
  319. font-wight:normal;
  320. font-style:italic;}
  321.  
  322.  
  323.  
  324. .space {
  325. width: 160px;
  326. height:241px;}
  327.  
  328. table {
  329. border-spacing:0;
  330. border-collapse:collapse;
  331. }
  332.  
  333.  
  334. .written-by {
  335. color: #ffffff; /* Edit here to change color of book's author */
  336. text-shadow: 1px 0px 0px #000000; /* Edit here to change color of shadow */
  337. margin: 0px;
  338. font-size: 12px;
  339. font-style:oblique;
  340. font-weight:bold;
  341. font-family: 'Times New Roman';
  342. border-bottom: 1px solid #ffffff; /* Edit here to change the bottom line */
  343. padding: 7px;
  344. margin-left: 10px;
  345. margin-right: 10px;}
  346.  
  347. .finished-on {
  348. color: #ffffff; /* Edit here to change color */
  349. text-shadow: 1px 0px 0px #000000; /* Edit here to change color of shadow */
  350. margin: 0px;
  351. font-size: 12px;
  352. font-family: 'Times New Roman';
  353. border-bottom: 1px solid #ffffff; /* Edit here to change the bottom line */
  354. padding: 7px;
  355. margin-left: 10px;
  356. margin-right: 10px;}
  357.  
  358. .rating {
  359. margin:0px;
  360. color: #ffe400;
  361. font-weight:normal;
  362. font-size: 18px;}
  363.  
  364. #line3 {
  365. clear:both;
  366. margin-top: 30px;
  367. height: 40px;}
  368. </style>
  369.  
  370. </head>
  371.  
  372. <body>
  373.  
  374. <div id="containter">
  375.  
  376. <div id="header">
  377.  
  378. <div id="paragraph1">
  379.  
  380. <div id="line1"></div>
  381.  
  382. <div id="avatar"><a href="/"><img src="{PortraitURL-30}" alt="" class="avatar"></a></div>
  383. </div>
  384.  
  385. <div id="line1"></div>
  386.  
  387. <div id="paragraph2">
  388. Books of 2013
  389.  
  390. <div id="line-bottom"></div>
  391.  
  392. </div>
  393.  
  394.  
  395. </div>
  396.  
  397. <div id="menu">
  398.  
  399. <div class="menu"><a href="/">back home</a></div>
  400.  
  401. <div class="menu"><a href="http://tumblr.com">dashboard</a></div>
  402.  
  403. <div class="menu"><a href="http://thedaughterofvalentine.tumblr.com">© Theme</a></div>
  404. </div>
  405.  
  406.  
  407.  
  408. <section class="ff-container">
  409.  
  410. <input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" />
  411. <label for="select-type-all" class="ff-label-type-all">All books</label>
  412.  
  413. <input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />
  414. <label for="select-type-1" class="ff-label-type-1">re-read</label>
  415.  
  416. <input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />
  417. <label for="select-type-2" class="ff-label-type-2">favorite</label>
  418.  
  419. <input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />
  420. <label for="select-type-3" class="ff-label-type-3">★★★★★</label>
  421.  
  422. <input id="select-type-4" name="radio-set-1" type="radio" class="ff-selector-type-4" />
  423. <label for="select-type-4" class="ff-label-type-4">★★★★☆</label>
  424.  
  425. <input id="select-type-5" name="radio-set-1" type="radio" class="ff-selector-type-5" />
  426. <label for="select-type-5" class="ff-label-type-5">★★★☆☆</label>
  427.  
  428. <input id="select-type-6" name="radio-set-1" type="radio" class="ff-selector-type-6" />
  429. <label for="select-type-6" class="ff-label-type-6">★★☆☆☆</label>
  430.  
  431. <input id="select-type-7" name="radio-set-1" type="radio" class="ff-selector-type-7" />
  432. <label for="select-type-7" class="ff-label-type-7">★☆☆☆☆</label>
  433.  
  434. <div class="clr"></div>
  435.  
  436. <ul class="ff-items">
  437.  
  438. <!-- FIRST LINE, STAR COPYING FORM HERE -->
  439.  
  440. <li class="ff-item-type-1">
  441.  
  442. <div class="image">
  443.  
  444. <div class="hoverme">
  445.  
  446. <table> <tr><td class="space">
  447.  
  448. <p class="title-of-book">Title of book</p> <!-- Put title of the book here -->
  449. <p class="written-by">by: author (2013)</p> <!-- Put autor of the book (and year when book was published) here -->
  450. <p class="finished-on">finished on: May 15th</p> <!-- Put info when you finish the book here -->
  451. <p class="rating">★★★★★</p> <!-- Put the rating here -->
  452.  
  453. </td></tr></table>
  454.  
  455. </div>
  456.  
  457. <img src="http://static.tumblr.com/jmc3mkz/AJamcyr1c/questionmark.png" alt ="" class="book" /> <!-- Put the photo of the cover here -->
  458.  
  459. </div>
  460.  
  461. </li>
  462.  
  463.  
  464. <li class="ff-item-type-2">
  465.  
  466. <div class="image">
  467.  
  468. <div class="hoverme">
  469.  
  470. <table> <tr><td class="space">
  471.  
  472. <p class="title-of-book">Title of book</p> <!-- Put title of the book here -->
  473. <p class="written-by">by: author (2013)</p> <!-- Put autor of the book (and year when book was published) here -->
  474. <p class="finished-on">finished on: May 15th</p> <!-- Put info when you finish the book here -->
  475. <p class="rating">★★★★★</p> <!-- Put the rating here -->
  476.  
  477. </td></tr></table>
  478.  
  479. </div>
  480.  
  481. <img src="http://static.tumblr.com/jmc3mkz/AJamcyr1c/questionmark.png" alt ="" class="book" /> <!-- Put the photo of the cover here -->
  482.  
  483. </div>
  484.  
  485. </li>
  486.  
  487. <li class="ff-item-type-3 & ff-item-type-5">
  488.  
  489. <div class="image">
  490.  
  491. <div class="hoverme">
  492.  
  493. <table> <tr><td class="space">
  494.  
  495. <p class="title-of-book">Title of book</p> <!-- Put title of the book here -->
  496. <p class="written-by">by: author (2013)</p> <!-- Put autor of the book (and year when book was published) here -->
  497. <p class="finished-on">finished on: May 15th</p> <!-- Put info when you finish the book here -->
  498. <p class="rating">★★★★★</p> <!-- Put the rating here -->
  499.  
  500. </td></tr></table>
  501.  
  502. </div>
  503.  
  504. <img src="http://static.tumblr.com/jmc3mkz/AJamcyr1c/questionmark.png" alt ="" class="book" /> <!-- Put the photo of the cover here -->
  505.  
  506. </div>
  507.  
  508. </li>
  509.  
  510. <li class="ff-item-type-1 & ff-item-type-3 &ff-item-type-4">
  511.  
  512. <div class="image">
  513.  
  514. <div class="hoverme">
  515.  
  516. <table> <tr><td class="space">
  517.  
  518. <p class="title-of-book">Title of book</p> <!-- Put title of the book here -->
  519. <p class="written-by">by: author (2013)</p> <!-- Put autor of the book (and year when book was published) here -->
  520. <p class="finished-on">finished on: May 15th</p> <!-- Put info when you finish the book here -->
  521. <p class="rating">★★★★★</p> <!-- Put the rating here -->
  522.  
  523. </td></tr></table>
  524.  
  525. </div>
  526.  
  527. <img src="http://static.tumblr.com/jmc3mkz/AJamcyr1c/questionmark.png" alt ="" class="book" /> <!-- Put the photo of the cover here -->
  528.  
  529. </div>
  530.  
  531. </li>
  532.  
  533. <li class="ff-item-type-1">
  534.  
  535. <div class="image">
  536.  
  537. <div class="hoverme">
  538.  
  539. <table> <tr><td class="space">
  540.  
  541. <p class="title-of-book">Title of book</p> <!-- Put title of the book here -->
  542. <p class="written-by">by: author (2013)</p> <!-- Put autor of the book (and year when book was published) here -->
  543. <p class="finished-on">finished on: May 15th</p> <!-- Put info when you finish the book here -->
  544. <p class="rating">★★★★★</p> <!-- Put the rating here -->
  545.  
  546. </td></tr></table>
  547.  
  548. </div>
  549.  
  550. <img src="http://static.tumblr.com/jmc3mkz/AJamcyr1c/questionmark.png" alt ="" class="book" /> <!-- Put the photo of the cover here -->
  551.  
  552. </div>
  553.  
  554. </li>
  555.  
  556. <li class="ff-item-type-1">
  557.  
  558. <div class="image">
  559.  
  560. <div class="hoverme">
  561.  
  562. <table> <tr><td class="space">
  563.  
  564. <p class="title-of-book">Title of book</p> <!-- Put title of the book here -->
  565. <p class="written-by">by: author (2013)</p> <!-- Put autor of the book (and year when book was published) here -->
  566. <p class="finished-on">finished on: May 15th</p> <!-- Put info when you finish the book here -->
  567. <p class="rating">★★★★★</p> <!-- Put the rating here -->
  568.  
  569. </td></tr></table>
  570.  
  571. </div>
  572.  
  573. <img src="http://static.tumblr.com/jmc3mkz/AJamcyr1c/questionmark.png" alt ="" class="book" /> <!-- Put the photo of the cover here -->
  574.  
  575. </div>
  576.  
  577. </li>
  578.  
  579. <!-- END OF FIRST LINE, STOP COPYING HERE -->
  580.  
  581. <!-- SECOND LINE, START COPYING FORM HERE -->
  582. <li class="ff-item-type-4">
  583.  
  584. <div class="image">
  585.  
  586. <div class="hoverme">
  587.  
  588. <table> <tr><td class="space">
  589.  
  590. <p class="title-of-book">Title of book</p> <!-- Put title of the book here -->
  591. <p class="written-by">by: author (2013)</p> <!-- Put autor of the book (and year when book was published) here -->
  592. <p class="finished-on">finished on: May 15th</p> <!-- Put info when you finish the book here -->
  593. <p class="rating">★★★★★</p> <!-- Put the rating here -->
  594.  
  595. </td></tr></table>
  596.  
  597. </div>
  598.  
  599. <img src="http://static.tumblr.com/jmc3mkz/AJamcyr1c/questionmark.png" alt ="" class="book" /> <!-- Put the photo of the cover here -->
  600.  
  601. </div>
  602.  
  603. </li>
  604.  
  605. <li class="ff-item-type-8">
  606.  
  607. <div class="image">
  608.  
  609. <div class="hoverme">
  610.  
  611. <table> <tr><td class="space">
  612.  
  613. <p class="title-of-book">Title of book</p> <!-- Put title of the book here -->
  614. <p class="written-by">by: author (2013)</p> <!-- Put autor of the book (and year when book was published) here -->
  615. <p class="finished-on">finished on: May 15th</p> <!-- Put info when you finish the book here -->
  616. <p class="rating">★★★★★</p> <!-- Put the rating here -->
  617.  
  618. </td></tr></table>
  619.  
  620. </div>
  621.  
  622. <img src="http://static.tumblr.com/jmc3mkz/AJamcyr1c/questionmark.png" alt ="" class="book" /> <!-- Put the photo of the cover here -->
  623.  
  624. </div>
  625.  
  626. </li>
  627.  
  628. <li class="ff-item-type-5 & ff-item-type-2">
  629.  
  630. <div class="image">
  631.  
  632. <div class="hoverme">
  633.  
  634. <table> <tr><td class="space">
  635.  
  636. <p class="title-of-book">Title of book</p> <!-- Put title of the book here -->
  637. <p class="written-by">by: author (2013)</p> <!-- Put autor of the book (and year when book was published) here -->
  638. <p class="finished-on">finished on: May 15th</p> <!-- Put info when you finish the book here -->
  639. <p class="rating">★★★★★</p> <!-- Put the rating here -->
  640.  
  641. </td></tr></table>
  642.  
  643. </div>
  644.  
  645. <img src="http://static.tumblr.com/jmc3mkz/AJamcyr1c/questionmark.png" alt ="" class="book" /> <!-- Put the photo of the cover here -->
  646.  
  647. </div>
  648.  
  649. </li>
  650.  
  651. <li class="ff-item-type-1">
  652.  
  653. <div class="image">
  654.  
  655. <div class="hoverme">
  656.  
  657. <table> <tr><td class="space">
  658.  
  659. <p class="title-of-book">Title of book</p> <!-- Put title of the book here -->
  660. <p class="written-by">by: author (2013)</p> <!-- Put autor of the book (and year when book was published) here -->
  661. <p class="finished-on">finished on: May 15th</p> <!-- Put info when you finish the book here -->
  662. <p class="rating">★★★★★</p> <!-- Put the rating here -->
  663.  
  664. </td></tr></table>
  665.  
  666. </div>
  667.  
  668. <img src="http://static.tumblr.com/jmc3mkz/AJamcyr1c/questionmark.png" alt ="" class="book" /> <!-- Put the photo of the cover here -->
  669.  
  670. </div>
  671.  
  672. </li>
  673.  
  674. <li class="ff-item-type-9">
  675.  
  676. <div class="image">
  677.  
  678. <div class="hoverme">
  679.  
  680. <table> <tr><td class="space">
  681.  
  682. <p class="title-of-book">Title of book</p> <!-- Put title of the book here -->
  683. <p class="written-by">by: author (2013)</p> <!-- Put autor of the book (and year when book was published) here -->
  684. <p class="finished-on">finished on: May 15th</p> <!-- Put info when you finish the book here -->
  685. <p class="rating">★★★★★</p> <!-- Put the rating here -->
  686.  
  687. </td></tr></table>
  688.  
  689. </div>
  690.  
  691. <img src="http://static.tumblr.com/jmc3mkz/AJamcyr1c/questionmark.png" alt ="" class="book" /><!-- Put the photo of the cover here -->
  692.  
  693. </div>
  694.  
  695. </li>
  696.  
  697. <li class="ff-item-type-3">
  698.  
  699. <div class="image">
  700.  
  701. <div class="hoverme">
  702.  
  703. <table> <tr><td class="space">
  704.  
  705. <p class="title-of-book">Title of book</p> <!-- Put title of the book here -->
  706. <p class="written-by">by: author (2013)</p> <!-- Put autor of the book (and year when book was published) here -->
  707. <p class="finished-on">finished on: May 15th</p> <!-- Put info when you finish the book here -->
  708. <p class="rating">★★★★★</p> <!-- Put the rating here -->
  709.  
  710. </td></tr></table>
  711.  
  712. </div>
  713.  
  714. <img src="http://static.tumblr.com/jmc3mkz/AJamcyr1c/questionmark.png" alt ="" class="book" /> <!-- Put the photo of the cover here -->
  715.  
  716. </div>
  717.  
  718. </li>
  719.  
  720. <!-- END OF SECOND LINE -->
  721. </section>
  722.  
  723. <div id="line3"></div>
  724. </div>
  725.  
  726. </body>
  727.  
  728. </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!