API tools faq
paste
Advertisement
cvndythemes

VESTA: PAGE

cvndythemes
Apr 1st, 2019
583
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <title>Page Title</title>
  5.  
  6. <!--
  7.  
  8. >> ETHEREAL THEMES // VESTA - BOOKS REC PAGE
  9.  
  10. Designed by etherealthemes
  11. etherealthemes.tumblr.com
  12. ⓒ 2016 - 2019
  13.  
  14. >> TERMS OF USE
  15.  
  16. Do NOT remove the credit
  17. Do NOT claim as your own
  18.  
  19. *You can move the credit, but leave it visible
  20. *Edit as much as you'd like
  21. *Feel free to ask about basic customization
  22. *Page suggestions always welcomed
  23.  
  24. >> PAGE HELP
  25.  
  26. Everything is named as what it is, ie to change the scrollbar
  27. search "Scrollbar".
  28. Search color codes to change:
  29. BG: #ffffff, Text: ##000000, Gray: #dddddd, Accent: #e8e8e8
  30.  
  31. TO ADD BOOKS:
  32. To add books, search:
  33. START BOOK
  34. and copy from START BOOK to END BOOK
  35. and paste to add a book
  36.  
  37. Each book from START to END has two images, search:
  38. Cover Image
  39. to change the main image and search:
  40. Book Image
  41. to change the smaller hover image
  42.  
  43.  
  44. MISC:
  45. To change header image, search
  46. HEADER IMAGE
  47. and add your 800X200 image url
  48. All info in scroll box to keep page tidy.
  49. Page auto-centers
  50. Auto-fills all page sizes ; drag your window size to preview
  51.  
  52.  
  53. -->
  54.  
  55. <!-- SCRIPTS-->
  56. <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i" rel="stylesheet">
  57.  
  58.  
  59. <!-- STYLESHEET-->
  60. <style type="text/css">
  61.  
  62. /* --- SCROLLBAR --- */
  63.  
  64. ::-webkit-scrollbar-thumb {background:#f09a75;border:4px solid #ffffff;}
  65.  
  66. ::-webkit-scrollbar {width:11px;border:5px solid #ffffff;border-right:5px solid #ffffff;background:#ffffff;}
  67.  
  68. /* --- SELECTION ---*/
  69.  
  70. ::-moz-selection {color:#ffffff;background:#f09a75;opacity:1;}
  71.  
  72. ::selection {color:#ffffff;background:#f09a75;opacity:1;}
  73.  
  74. /* --- TUMBLR TOOLS --- */
  75.  
  76. iframe.tmblr-iframe {
  77. position:fixed;
  78. z-index:10!important;
  79. top:3px!important;
  80. right:0px!important;
  81. opacity:0;
  82. padding-right:60px;
  83. transform:scale(0.5);
  84. transform-origin:100% 0;
  85. -webkit-transform:scale(0.5);
  86. -webkit-transform-origin:100% 0;
  87. -o-transform:scale(0.5);
  88. -o-transform-origin:100% 0;
  89. -moz-transform:scale(0.5);
  90. -moz-transform-origin:100% 0;
  91. -ms-transform:scale(0.5);
  92. -ms-transform-origin:100% 0;
  93. transition:.2s ease-in-out;
  94. -webkit-transition:.2s ease-in-out;
  95. -moz-transition:.2s ease-in-out;
  96.  
  97. /* ---------- CHANGE TO 0 FOR WHITE TOOLS -- */
  98. filter:invert(1);
  99. -webkit-filter:invert(1);
  100. -o-filter:invert(1);
  101. -moz-filter:invert(1);
  102. -ms-filter:invert(1);
  103. }
  104.  
  105. iframe.tmblr-iframe:hover {opacity:0.5!important;}
  106.  
  107. .tcontrols {
  108. position:fixed;
  109. top:10px;
  110. right:15px;
  111. z-index:9;
  112. transition:.2s ease-in-out;
  113. -webkit-transition:.2s ease-in-out;
  114. -moz-transition:.2s ease-in-out;
  115. }
  116.  
  117. .tcontrols {color:#000000;font-size:14px;}
  118.  
  119. /* --- BODY --- */
  120.  
  121. body {
  122. margin: 0px;
  123. padding: 0px;
  124. font-family: 'Muli', sans-serif;
  125. color:#000000;
  126. font-size:10px;
  127. line-height:155%;
  128. font-weight:normal;
  129. word-wrap:normal;
  130. text-align:left;
  131. background:#ffffff;
  132. }
  133.  
  134. a {
  135. color:#000000;
  136. text-decoration:none;
  137. border:0;
  138. opacity:0.6;
  139. transition:0.3s ease-in-out;
  140. -webkit-transition:0.3s ease-in-out;
  141. -moz-transition:0.3s ease-in-out;
  142. }
  143.  
  144. a:hover {opacity:1.0;}
  145.  
  146. b,strong {font-weight:700;}
  147.  
  148. .et {position:fixed;color:#000000;right:8px;bottom:8px;opacity:0.6;text-transform:uppercase;font-size:calc(10px - 0.5px);z-index:10;}
  149.  
  150. /* --- CONTAINER --- */
  151.  
  152. .container {
  153. margin:0 auto;
  154. width:calc(100% - 100px);
  155. margin:35px 0px 50px 30px;
  156. padding:20px;
  157. background:#ffffff;
  158. }
  159.  
  160. .block_top, .block_bottom {position:fixed;background:#ffffff;height:35px;width:100%;z-index:8;}
  161.  
  162. .block_top {top:0px;left:0px;}
  163.  
  164. .block_bottom {bottom:0px;left:0px;}
  165.  
  166. /* --- HEADER --- */
  167.  
  168. .header {
  169. margin:0 auto;
  170. width:800px;
  171. height:200px;
  172. background-image: url('https://placehold.it/800X200');
  173. background-position:top center;
  174. background-repeat:no-repeat;
  175. }
  176.  
  177. /* --- SIDEBAR --- */
  178.  
  179. .sidebar {
  180. margin:0 auto;
  181. width:680px;
  182. padding:20px;
  183. text-align:center;
  184. background:#ffffff;
  185. }
  186.  
  187. .navigation {padding:20px 20px 0px 20px;}
  188.  
  189. .navigation a {
  190. text-transform:uppercase;
  191. margin:0px 10px;
  192. font-size:calc(10px - 1px);
  193. font-weight:700;
  194. letter-spacing:0.5px;
  195. color:#f09a75;
  196. opacity:1.0;
  197. }
  198.  
  199. .navigation a:hover {opacity:0.7;}
  200.  
  201. /* --- BOOKS --- */
  202.  
  203. .books_container {
  204. margin:0 auto;
  205. width:calc(100% - 40px);
  206. padding:20px;
  207. text-align:center;
  208. background:#ffffff;
  209. }
  210.  
  211. .book {
  212. display:inline-block;
  213. width:300px;
  214. height:400px;
  215. margin:0px 30px 0px 30px;
  216. transition:0.3s ease-in-out;
  217. -webkit-transition:0.3s ease-in-out;
  218. -moz-transition:0.3s ease-in-out;
  219. }
  220.  
  221. .book_cover {
  222. position:relative;
  223. top:0px;
  224. margin-bottom:-340px;
  225. left:0px;
  226. width:300px;
  227. height:400px;
  228. background-color:#ffffff;
  229. z-index:1;
  230. }
  231.  
  232. .book_cover img {width:300px;height:400px;}
  233.  
  234. .book_title {
  235. position:relative;
  236. top:340px;
  237. width:278px;
  238. padding:10px;
  239. text-align:center;
  240. background:#ffffff;
  241. border:1px solid #dddddd;
  242. z-index:2;
  243. }
  244.  
  245. .book_title h1 {text-transform:uppercase;font-size:calc(10px + 3px);margin:0px 0px 10px 0px;}
  246.  
  247. .book_title h2 {text-transform:uppercase;font-size:calc(10px + 1px);font-style:italic;margin:0px;color:#f09a75;}
  248.  
  249. .book_detail {
  250. position:relative;
  251. top:-122px;
  252. margin-bottom:0px;
  253. left:0px;
  254. width:260px;
  255. height:360px;
  256. padding:20px;
  257. overflow:scroll;
  258. overflow-x:hidden;
  259. background:#ffffff;
  260. opacity:0;
  261. transition:0.3s ease-in-out;
  262. -webkit-transition:0.3s ease-in-out;
  263. -moz-transition:0.3s ease-in-out;
  264. z-index:2;
  265. }
  266.  
  267. .book_detail:hover {opacity:1.0;}
  268.  
  269. .book_detail::-webkit-scrollbar-thumb {background:#f09a75;border:3px solid #ffffff;}
  270.  
  271. .book_detail::-webkit-scrollbar {width:8px;border:0px solid #ffffff;border-right:0px solid #ffffff;background:#ffffff;}
  272.  
  273. .book_image img {height:150px;width:260px;}
  274.  
  275. .book_detail h1 {text-transform:uppercase;font-size:calc(10px + 5px);margin:20px 0px 10px 0px;}
  276.  
  277. .book_links {text-align:center;margin:20px 0px 10px 0px;}
  278.  
  279. .book_links a {
  280. text-transform:uppercase;
  281. margin:0px 10px;
  282. font-size:calc(10px - 1px);
  283. font-weight:700;
  284. letter-spacing:0.5px;
  285. transition:0.3s ease-in-out;
  286. -webkit-transition:0.3s ease-in-out;
  287. -moz-transition:0.3s ease-in-out;
  288. opacity:1.0;
  289. }
  290.  
  291. .book_links a:hover {opacity:0.7}
  292.  
  293. </style>
  294. <body>
  295.  
  296.  
  297.  
  298.  
  299. <!-- DO NOT EDIT -->
  300. <div class="tcontrols">+</div><div class="block_top"></div><div class="block_bottom"></div><div class="et"><a href="https://ethereal-themes.tumblr.com">ethereal</a></div>
  301.  
  302.  
  303.  
  304.  
  305. <!-- START CONTAINER -->
  306. <div class="container">
  307.  
  308.  
  309.  
  310.  
  311.  
  312.  
  313. <!-- START HEADER -->
  314. <div class="header"></div>
  315.  
  316.  
  317.  
  318.  
  319. <!-- START HEADER -->
  320. <div class="sidebar">
  321.  
  322. Lorem <a href="">ipsum</a> dolor sit <em>amet</em>, consectetur adipiscing elit. <b>Aliquam</b> pretium magna et <em>velit</em> dignissim, a placerat nisi rutrum. <i>Vestibulum</i> odio ipsum, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit <i>molestie</i> massa finibus <em>pulvinar</em> non nec lacus. <a href="">Nullam</a> ipsum nulla, sodales non ornare et, <b>accumsan</b> a sem. Donec tempus leo non <em>laoreet</em> viverra. Vestibulum ac nunc sem. <b>Aenean</b> vitae <i>convallis</i> velit, non molestie augue.
  323.  
  324. <div class="navigation">
  325. <a href="#">link</a>
  326. <a href="#">link</a>
  327. <a href="#">link</a>
  328. <a href="#">link</a>
  329. <a href="#">link</a>
  330. <a href="#">link</a>
  331. </div>
  332.  
  333. </div>
  334. <!-- END HEADER -->
  335.  
  336.  
  337.  
  338.  
  339.  
  340. <!-- START BOOKS CONTAINER -->
  341. <div class="books_container">
  342.  
  343.  
  344.  
  345. <!---------- START BOOK ---------->
  346. <div class="book">
  347. <!-- Cover Image -->
  348. <div class="book_cover"><img src="https://placehold.it/300X400" /></div>
  349.  
  350. <!-- Book Title Start -->
  351. <div class="book_title">
  352. <h1>Book Title</h1>
  353. <h2>Book Author</h2>
  354. </div>
  355. <!-- Book Title End -->
  356.  
  357. <!-- Book Detail Start -->
  358. <div class="book_detail">
  359.  
  360. <!-- Book Image -->
  361. <div class="book_image"><img src="https://placehold.it/260X150"></div>
  362.  
  363. <h1>Synopsis</h1>
  364. Lorem <a href="">ipsum</a> dolor sit <em>amet</em>, consectetur adipiscing elit. <b>Aliquam</b> pretium magna et <em>velit</em> dignissim, a placerat nisi rutrum. <i>Vestibulum</i> odio ipsum, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit <i>molestie</i> massa finibus <em>pulvinar</em> non nec lacus. <a href="">Nullam</a> ipsum nulla, sodales non ornare et, <b>accumsan</b> a sem. Donec tempus leo non <em>laoreet</em> viverra. Vestibulum ac nunc sem. <b>Aenean</b> vitae <i>convallis</i> velit, non molestie augue.
  365.  
  366. <h1>Title</h1>
  367. Lorem <a href="">ipsum</a> dolor sit <em>amet</em>, consectetur adipiscing elit. <b>Aliquam</b> pretium magna et <em>velit</em> dignissim, a placerat nisi rutrum. <i>Vestibulum</i> odio ipsum, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit <i>molestie</i> massa finibus <em>pulvinar</em> non nec lacus. <a href="">Nullam</a> ipsum nulla, sodales non ornare et, <b>accumsan</b> a sem. Donec tempus leo non <em>laoreet</em> viverra. Vestibulum ac nunc sem. <b>Aenean</b> vitae <i>convallis</i> velit, non molestie augue.
  368.  
  369. <div class="book_links">
  370. <a href="#">link</a>
  371. <a href="#">link</a>
  372. <a href="#">link</a>
  373. <a href="#">link</a>
  374. </div>
  375.  
  376. </div>
  377. <!-- Book Detail End -->
  378. </div>
  379. <!---------- END BOOK ---------->
  380.  
  381.  
  382.  
  383.  
  384.  
  385.  
  386.  
  387.  
  388.  
  389. <!---------- START BOOK ---------->
  390. <div class="book">
  391. <!-- Cover Image -->
  392. <div class="book_cover"><img src="https://placehold.it/300X400" /></div>
  393.  
  394. <!-- Book Title Start -->
  395. <div class="book_title">
  396. <h1>Book Title</h1>
  397. <h2>Book Author</h2>
  398. </div>
  399. <!-- Book Title End -->
  400.  
  401. <!-- Book Detail Start -->
  402. <div class="book_detail">
  403.  
  404. <!-- Book Image -->
  405. <div class="book_image"><img src="https://placehold.it/260X150"></div>
  406.  
  407. <h1>Synopsis</h1>
  408. Lorem <a href="">ipsum</a> dolor sit <em>amet</em>, consectetur adipiscing elit. <b>Aliquam</b> pretium magna et <em>velit</em> dignissim, a placerat nisi rutrum. <i>Vestibulum</i> odio ipsum, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit <i>molestie</i> massa finibus <em>pulvinar</em> non nec lacus. <a href="">Nullam</a> ipsum nulla, sodales non ornare et, <b>accumsan</b> a sem. Donec tempus leo non <em>laoreet</em> viverra. Vestibulum ac nunc sem. <b>Aenean</b> vitae <i>convallis</i> velit, non molestie augue.
  409.  
  410. <h1>Title</h1>
  411. Lorem <a href="">ipsum</a> dolor sit <em>amet</em>, consectetur adipiscing elit. <b>Aliquam</b> pretium magna et <em>velit</em> dignissim, a placerat nisi rutrum. <i>Vestibulum</i> odio ipsum, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit <i>molestie</i> massa finibus <em>pulvinar</em> non nec lacus. <a href="">Nullam</a> ipsum nulla, sodales non ornare et, <b>accumsan</b> a sem. Donec tempus leo non <em>laoreet</em> viverra. Vestibulum ac nunc sem. <b>Aenean</b> vitae <i>convallis</i> velit, non molestie augue.
  412.  
  413. <div class="book_links">
  414. <a href="#">link</a>
  415. <a href="#">link</a>
  416. <a href="#">link</a>
  417. <a href="#">link</a>
  418. </div>
  419.  
  420. </div>
  421. <!-- Book Detail End -->
  422. </div>
  423. <!---------- END BOOK ---------->
  424.  
  425.  
  426.  
  427.  
  428.  
  429.  
  430.  
  431.  
  432.  
  433. <!---------- START BOOK ---------->
  434. <div class="book">
  435. <!-- Cover Image -->
  436. <div class="book_cover"><img src="https://placehold.it/300X400" /></div>
  437.  
  438. <!-- Book Title Start -->
  439. <div class="book_title">
  440. <h1>Book Title</h1>
  441. <h2>Book Author</h2>
  442. </div>
  443. <!-- Book Title End -->
  444.  
  445. <!-- Book Detail Start -->
  446. <div class="book_detail">
  447.  
  448. <!-- Book Image -->
  449. <div class="book_image"><img src="https://placehold.it/260X150"></div>
  450.  
  451. <h1>Synopsis</h1>
  452. Lorem <a href="">ipsum</a> dolor sit <em>amet</em>, consectetur adipiscing elit. <b>Aliquam</b> pretium magna et <em>velit</em> dignissim, a placerat nisi rutrum. <i>Vestibulum</i> odio ipsum, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit <i>molestie</i> massa finibus <em>pulvinar</em> non nec lacus. <a href="">Nullam</a> ipsum nulla, sodales non ornare et, <b>accumsan</b> a sem. Donec tempus leo non <em>laoreet</em> viverra. Vestibulum ac nunc sem. <b>Aenean</b> vitae <i>convallis</i> velit, non molestie augue.
  453.  
  454. <h1>Title</h1>
  455. Lorem <a href="">ipsum</a> dolor sit <em>amet</em>, consectetur adipiscing elit. <b>Aliquam</b> pretium magna et <em>velit</em> dignissim, a placerat nisi rutrum. <i>Vestibulum</i> odio ipsum, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit <i>molestie</i> massa finibus <em>pulvinar</em> non nec lacus. <a href="">Nullam</a> ipsum nulla, sodales non ornare et, <b>accumsan</b> a sem. Donec tempus leo non <em>laoreet</em> viverra. Vestibulum ac nunc sem. <b>Aenean</b> vitae <i>convallis</i> velit, non molestie augue.
  456.  
  457. <div class="book_links">
  458. <a href="#">link</a>
  459. <a href="#">link</a>
  460. <a href="#">link</a>
  461. <a href="#">link</a>
  462. </div>
  463.  
  464. </div>
  465. <!-- Book Detail End -->
  466. </div>
  467. <!---------- END BOOK ---------->
  468.  
  469.  
  470.  
  471.  
  472.  
  473.  
  474.  
  475.  
  476.  
  477. <!---------- START BOOK ---------->
  478. <div class="book">
  479. <!-- Cover Image -->
  480. <div class="book_cover"><img src="https://placehold.it/300X400" /></div>
  481.  
  482. <!-- Book Title Start -->
  483. <div class="book_title">
  484. <h1>Book Title</h1>
  485. <h2>Book Author</h2>
  486. </div>
  487. <!-- Book Title End -->
  488.  
  489. <!-- Book Detail Start -->
  490. <div class="book_detail">
  491.  
  492. <!-- Book Image -->
  493. <div class="book_image"><img src="https://placehold.it/260X150"></div>
  494.  
  495. <h1>Synopsis</h1>
  496. Lorem <a href="">ipsum</a> dolor sit <em>amet</em>, consectetur adipiscing elit. <b>Aliquam</b> pretium magna et <em>velit</em> dignissim, a placerat nisi rutrum. <i>Vestibulum</i> odio ipsum, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit <i>molestie</i> massa finibus <em>pulvinar</em> non nec lacus. <a href="">Nullam</a> ipsum nulla, sodales non ornare et, <b>accumsan</b> a sem. Donec tempus leo non <em>laoreet</em> viverra. Vestibulum ac nunc sem. <b>Aenean</b> vitae <i>convallis</i> velit, non molestie augue.
  497.  
  498. <h1>Title</h1>
  499. Lorem <a href="">ipsum</a> dolor sit <em>amet</em>, consectetur adipiscing elit. <b>Aliquam</b> pretium magna et <em>velit</em> dignissim, a placerat nisi rutrum. <i>Vestibulum</i> odio ipsum, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit <i>molestie</i> massa finibus <em>pulvinar</em> non nec lacus. <a href="">Nullam</a> ipsum nulla, sodales non ornare et, <b>accumsan</b> a sem. Donec tempus leo non <em>laoreet</em> viverra. Vestibulum ac nunc sem. <b>Aenean</b> vitae <i>convallis</i> velit, non molestie augue.
  500.  
  501. <div class="book_links">
  502. <a href="#">link</a>
  503. <a href="#">link</a>
  504. <a href="#">link</a>
  505. <a href="#">link</a>
  506. </div>
  507.  
  508. </div>
  509. <!-- Book Detail End -->
  510. </div>
  511. <!---------- END BOOK ---------->
  512.  
  513.  
  514.  
  515.  
  516.  
  517.  
  518.  
  519.  
  520.  
  521. <!---------- START BOOK ---------->
  522. <div class="book">
  523. <!-- Cover Image -->
  524. <div class="book_cover"><img src="https://placehold.it/300X400" /></div>
  525.  
  526. <!-- Book Title Start -->
  527. <div class="book_title">
  528. <h1>Book Title</h1>
  529. <h2>Book Author</h2>
  530. </div>
  531. <!-- Book Title End -->
  532.  
  533. <!-- Book Detail Start -->
  534. <div class="book_detail">
  535.  
  536. <!-- Book Image -->
  537. <div class="book_image"><img src="https://placehold.it/260X150"></div>
  538.  
  539. <h1>Synopsis</h1>
  540. Lorem <a href="">ipsum</a> dolor sit <em>amet</em>, consectetur adipiscing elit. <b>Aliquam</b> pretium magna et <em>velit</em> dignissim, a placerat nisi rutrum. <i>Vestibulum</i> odio ipsum, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit <i>molestie</i> massa finibus <em>pulvinar</em> non nec lacus. <a href="">Nullam</a> ipsum nulla, sodales non ornare et, <b>accumsan</b> a sem. Donec tempus leo non <em>laoreet</em> viverra. Vestibulum ac nunc sem. <b>Aenean</b> vitae <i>convallis</i> velit, non molestie augue.
  541.  
  542. <h1>Title</h1>
  543. Lorem <a href="">ipsum</a> dolor sit <em>amet</em>, consectetur adipiscing elit. <b>Aliquam</b> pretium magna et <em>velit</em> dignissim, a placerat nisi rutrum. <i>Vestibulum</i> odio ipsum, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit <i>molestie</i> massa finibus <em>pulvinar</em> non nec lacus. <a href="">Nullam</a> ipsum nulla, sodales non ornare et, <b>accumsan</b> a sem. Donec tempus leo non <em>laoreet</em> viverra. Vestibulum ac nunc sem. <b>Aenean</b> vitae <i>convallis</i> velit, non molestie augue.
  544.  
  545. <div class="book_links">
  546. <a href="#">link</a>
  547. <a href="#">link</a>
  548. <a href="#">link</a>
  549. <a href="#">link</a>
  550. </div>
  551.  
  552. </div>
  553. <!-- Book Detail End -->
  554. </div>
  555. <!---------- END BOOK ---------->
  556.  
  557.  
  558.  
  559.  
  560. </div>
  561. <!-- END BOOKS CONTAINER -->
  562.  
  563. </div>
  564. <!-- END CONTAINER -->
  565.  
  566. </body>
  567. </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!