API tools faq
paste
Advertisement
pistachi-o

bookshelf (html stars)

pistachi-o
Nov 26th, 2012
9,207
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3.  
  4. <!--
  5.  
  6. Bookshelf Page
  7. pistachi-o (nutty-themes @ tumblr)
  8.  
  9. Help/FAQ:
  10. http://nutty-themes.tumblr.com/tagged/page: bookshelf
  11.  
  12. Please Do Not:
  13. http://nutty-themes.tumblr.com/terms
  14.  
  15. -->
  16.  
  17.  
  18.  
  19. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  20.  
  21. <head>
  22.  
  23. <title>{Title}</title>
  24.  <link rel="shortcut icon" href="{Favicon}">
  25.  <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  26.  
  27. <meta name="description" content="" />
  28.  
  29. <meta http-equiv="x-dns-prefetch-control" content="off"/></head>
  30.  
  31. <link href='http://fonts.googleapis.com/css?family=Share:400,700' rel='stylesheet' type='text/css'>
  32.  
  33. <style type="text/css">
  34.  
  35. /* Reset
  36. -------------------------------------------------------------*/
  37.  
  38. body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
  39.  
  40.  
  41.  
  42. /* Webkit-Scrollbar
  43. -------------------------------------------------------------*/
  44.  
  45. ::-webkit-scrollbar {width: 12px;}
  46. ::-webkit-scrollbar-track {background: #FFF;}
  47. ::-webkit-scrollbar-thumb {background: #DDD;}
  48.  
  49.  
  50.  
  51. /* General
  52. -------------------------------------------------------------*/
  53.  
  54. body {
  55. background: #F3F3F3;
  56. font-size: 12px;
  57. color: #000000;
  58. font-family: 'Share', 'Arial', sans-serif;
  59. }
  60.  
  61. a:link, a:active, a:visited {
  62. color: #A06269;
  63. text-decoration: none;
  64. }
  65.  
  66. a:hover {
  67. color: #F77825;
  68. text-decoration: underline;
  69. }
  70.  
  71.  
  72.  
  73. /* Container
  74. -------------------------------------------------------------*/
  75.  
  76. .container {
  77. width: 1105px;
  78. margin: 10px auto;
  79. padding: 10px;
  80. text-align: center;
  81. position: relative;
  82. background: transparent;
  83. }
  84.  
  85.  
  86.  
  87.  
  88. /* Navigation
  89. -------------------------------------------------------------*/
  90.  
  91. .navcut {
  92. width: 1105px;
  93. height: 15px;
  94. margin: 10px auto;
  95. position: relative;
  96. background: transparent;
  97. }
  98.  
  99. .navlinks {
  100. float: left;
  101. width: 205px;
  102. background: #DDD;
  103. text-decoration: none;
  104. font-weight: normal;
  105. text-transform: uppercase;
  106. text-align: center;
  107. padding: 3px 4px;
  108. margin: 1px;
  109. }
  110.  
  111. .desc {
  112. width: 1105px;
  113. margin: 10px auto;
  114. position: relative;
  115. background: transparent;
  116. font-size: 10px;
  117. text-align: center;
  118. position: relative;
  119. }
  120.  
  121. .container label {
  122. width: 207px;
  123. float: left;
  124. cursor: pointer;
  125. background: #DDD;
  126. color: #A06269;
  127. text-decoration: none;
  128. font-size: 12px;
  129. font-weight: normal;
  130. text-transform: uppercase;
  131. text-align: center;
  132. padding: 3px 4px;
  133. margin: 1px;
  134. }
  135.  
  136. .container input.selector-type-all:checked ~ label.label-type-all,
  137. .container input.selector-type-1:checked ~ label.label-type-1,
  138. .container input.selector-type-2:checked ~ label.label-type-2,
  139. .container input.selector-type-3:checked ~ label.label-type-3,
  140. .container input.selector-type-4:checked ~ label.label-type-4 {
  141. color: #F77825;
  142. background: transparent;
  143. }
  144.  
  145. .container input {
  146. display: none;
  147. }
  148.  
  149.  
  150.  
  151. /* Styling of Each Book
  152. -------------------------------------------------------------*/
  153.  
  154. .bookstyle {
  155. position: relative;
  156. margin: 0px auto;
  157. padding-top: 20px;
  158. }
  159.  
  160. .bookstyle li {
  161. float: left;
  162. width: 355px;
  163. height: 245px;
  164. background: #FFF;
  165. overflow: hidden;
  166. position: relative;
  167. text-align: center;
  168. margin: 5px;
  169. border: 1px solid #DDD;
  170. list-style: none;
  171. }
  172.  
  173. .title {
  174. width: 325px;
  175. margin: 0px 15px;
  176. padding: 12px 0px 5px 0px;
  177. font-size: 12px;
  178. text-align: left;
  179. text-decoration: none;
  180. font-weight: normal;
  181. text-transform: uppercase;
  182. background: transparent;
  183. border-bottom: 1px solid #F5F5F5;
  184. transition: all 0.5s ease-in-out;
  185. -webkit-transition: all 0.5s ease-in-out;
  186. -moz-transition: all 0.5s ease-in-out;
  187. -o-transition: all 0.5s ease-in-out;
  188. }
  189.  
  190. .title span {
  191. font-size: 10px;
  192. }
  193.  
  194. .cover {
  195. float: left;
  196. width: 125px;
  197. height: 190px;
  198. position: relative;
  199. margin: 10px 10px 10px 15px;
  200. }
  201.  
  202. .review {
  203. float: left;
  204. width: 180px;
  205. height: 155px;
  206. margin: 20px 0px;
  207. padding: 3px 10px 3px 0px;
  208. overflow: auto;
  209. font-size: 10px;
  210. text-align: left;
  211. }
  212.  
  213.  
  214.  
  215. /* Scrollbar for Books
  216. -------------------------------------------------------------*/
  217.  
  218. div.review::-webkit-scrollbar {width: 6px;}
  219. div.review::-webkit-scrollbar-track {background: #FFF; border: 1px solid #EEE;}
  220. div.review::-webkit-scrollbar-thumb {background: #EEE;}
  221.  
  222.  
  223.  
  224. /* CSS Sprites Rating
  225. -------------------------------------------------------------*/
  226.  
  227. .rating-static {
  228. width: 60px;
  229. height: 16px;
  230. display: block;
  231. background: url('http://static.tumblr.com/whx9ghv/eo4mamay1/star-rating.png') 0 0 no-repeat;
  232. }
  233.  
  234. .rating-50 { background-position: 0 0; }
  235. .rating-40 { background-position: -12px 0; }
  236. .rating-30 { background-position: -24px 0; }
  237. .rating-20 { background-position: -36px 0; }
  238. .rating-10 { background-position: -48px 0; }
  239. .rating-0 { background-position: -60px 0; }
  240.  
  241. .rating-5  { background-position: -48px -16px; }
  242. .rating-15 { background-position: -36px -16px; }
  243. .rating-25 { background-position: -24px -16px; }
  244. .rating-35 { background-position: -12px -16px; }
  245. .rating-45 { background-position: 0 -16px; }
  246.  
  247.  
  248.  
  249.  
  250. /* Active Style
  251. -------------------------------------------------------------*/
  252.  
  253. .container input.selector-type-all:checked ~ .bookstyle li,
  254. .container input.selector-type-1:checked ~ .bookstyle .bookstyle-type-1,
  255. .container input.selector-type-2:checked ~ .bookstyle .bookstyle-type-2,
  256. .container input.selector-type-3:checked ~ .bookstyle .bookstyle-type-3,
  257. .container input.selector-type-4:checked ~ .bookstyle .bookstyle-type-4 {
  258. -webkit-transform: scale(1);
  259. -moz-transform: scale(1);
  260. -o-transform: scale(1);
  261. transform: scale(1);
  262. -webkit-transition: 0.4s ease-out;
  263. -o-transition: 0.4s ease-out;
  264. -moz-transition: 0.4s ease-out;
  265. transition: 0.4s ease-out;
  266. opacity: 1;
  267. }
  268.  
  269. .container input.selector-type-1:checked ~ .bookstyle li:not(.bookstyle-type-1),
  270. .container input.selector-type-2:checked ~ .bookstyle li:not(.bookstyle-type-2),
  271. .container input.selector-type-3:checked ~ .bookstyle li:not(.bookstyle-type-3),
  272. .container input.selector-type-4:checked ~ .bookstyle li:not(.bookstyle-type-4) {
  273. -webkit-transform: scale(0.8);
  274. -moz-transform: scale(0.8);
  275. -o-transform: scale(0.8);
  276. transform: scale(0.8);
  277. -webkit-transition: 0.4s ease-out;
  278. -o-transition: 0.4s ease-out;
  279. -moz-transition: 0.4s ease-out;
  280. transition: 0.4s ease-out;
  281. -webkit-filter: blur(4px);
  282. opacity: 0.7;
  283. }
  284.  
  285. .container input.selector-type-1:checked ~ .bookstyle li:not(.bookstyle-type-1) span,
  286. .container input.selector-type-2:checked ~ .bookstyle li:not(.bookstyle-type-2) span,
  287. .container input.selector-type-3:checked ~ .bookstyle li:not(.bookstyle-type-3) span,
  288. .container input.selector-type-4:checked ~ .bookstyle li:not(.bookstyle-type-4) span {
  289. display: none;
  290. }
  291.  
  292.  
  293. </style>  
  294.  
  295. <body>
  296.  
  297. <section class="container">
  298.  
  299. <a class="navlinks" href="/" style="margin-left: 10px;">Back To Blog</a>
  300.  
  301. <input id="select-type-all" name="radio-set-1" type="radio" class="selector-type-all" checked="checked" />
  302. <label for="select-type-all" class="label-type-all">Bookshelf</label>
  303.                
  304. <input id="select-type-1" name="radio-set-1" type="radio" class="selector-type-1" />
  305. <label for="select-type-1" class="label-type-1">Currently & To-Read</label>
  306.                
  307. <input id="select-type-3" name="radio-set-1" type="radio" class="selector-type-3" />
  308. <label for="select-type-3" class="label-type-3">Favourites</label>
  309.  
  310. <a class="navlinks" href="http://nutty-themes.tumblr.com/">Credit</a>
  311.  
  312. <div class="navcut"></div>
  313.  
  314. <div class="desc">
  315. You can add text/description here.
  316. </div>
  317.  
  318. <ul class="bookstyle">
  319.  
  320. <!-- First Example (Currently Reading) -->
  321. <li class="bookstyle-type-1">
  322. <div class="title">The Casual Vacancy <span>by J.K. Rowling</span></div>
  323. <img src="http://i.imgur.com/D7a0e.jpg" class="cover">
  324. <div class="review">Rating: <span class="rating-static rating-30"></span> <br>
  325. <a href="http://www.goodreads.com/book/show/13497818-the-casual-vacancy">Goodreads</a> - When Barry Fairbrother dies in his early forties, the town of Pagford is left in shock. Pagford is, seemingly, an English idyll, with a cobbled market square and an ancient abbey, but what lies behind the pretty façade is a town at war. Rich at war with poor, teenagers at war with their parents, wives at war with their husbands, teachers at war with their pupils...Pagford is not what it first seems. <br><br>And the empty seat left by Barry on the parish council soon becomes the catalyst for the biggest war the town has yet seen. Who will triumph in an election fraught with passion, duplicity and unexpected revelations? </div>
  326. </li>
  327.  
  328.  
  329.  
  330. <!-- New Book (Normal HTML Stars Rating) -->
  331. <li class="bookstyle-type-2">
  332. <div class="title">TITLE (HTML Stars Rating) <span>by AUTHOR </span></div>
  333. <img src="IMAGE URL" class="cover">
  334. <div class="review">Rating: <span style="color: #FFD700;">★★★</span> <br><br><br>
  335. Text
  336. </div></li>
  337.  
  338.  
  339. </ul>
  340. </section>
  341.  
  342.  
  343.  
  344.  
  345.  
  346.        
  347.        
  348. </body>
  349.  
  350. </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!