API tools faq
paste
Advertisement
cvndythemes

diana_character_page

cvndythemes
May 23rd, 2020
274
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <title>Diana: Character Page</title>
  5.  
  6. <!--
  7.  
  8. >> ETHEREAL THEMES // DIANA - CHARACTER PAGE
  9.  
  10. Designed by etherealthemes
  11. etherealthemes.tumblr.com
  12. ⓒ 2016 - 2020
  13. Header Image ⓒ Olena Shmahalo via uunsplash @theoperatingsystem
  14.  
  15. >> TERMS OF USE
  16.  
  17. Do NOT remove the credit
  18. Do NOT claim as your own
  19.  
  20. *You can move the credit, but leave it visible
  21. *Edit as much as you'd like
  22. *Feel free to ask about basic customization
  23. *Page suggestions always welcomed
  24.  
  25. >> PAGE HELP
  26.  
  27. TO ADD CHARACTERS:
  28. To add characters, search:
  29. CHARACTER START
  30. and copy the block from CHARACTER START to CHARACTER END
  31. then paste after the last character block
  32.  
  33. Each character from START to END has one image, search:
  34. CHARACTER PORTRAIT
  35. to change the character image
  36.  
  37. MISC:
  38. To change the header image, search
  39. CHANGE HEADER HERE
  40. and add your image url ***1500X1000px recommended
  41. All info in scroll box to keep page tidy.
  42. Page auto-centers
  43. Auto-fills all page sizes ; drag your window size to preview
  44.  
  45. TO DISABLE HEADER AUTO PAGE FILL SEARCH:
  46. Auto Fill
  47. and delete from AUTO FILL START to AUTO FILL END
  48.  
  49. TO ADD A CONTAINER BACKGROUND SEARCH
  50. .container
  51. And replace TRANSPARENT with a hex color code
  52.  
  53. COLORS:
  54. To edit colors, search for the section you're looking for. I name all my sections after what they are ie "Navigation", "Characters". An easier cheat sheet to search for specific colors below:
  55.  
  56. -Dark Green #2f4729 (scrollbar track, mouse selection, hover character name)
  57. -Pale Green #686b5f (navigation hover borders, hover character links)
  58. -Character Borders search: border:15px solid white
  59. -Hover Character Info search: .character_info
  60. > make sure to also match the CHARACTER CONTAINER SCROLLBAR border colors
  61. -Hover Character Name search: .character_info h1
  62. -Hover Character Links Background search: .character_links a
  63.  
  64.  
  65. -->
  66.  
  67. <!-- SCRIPTS-->
  68. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  69.  
  70. <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700|Karla:400,400i,700,700i&display=swap" rel="stylesheet">
  71.  
  72. <!-- STYLESHEET-->
  73. <style type="text/css">
  74.  
  75. /* --- SCROLLBAR --- */
  76.  
  77. ::-webkit-scrollbar-thumb {background:#2f4729;border:4px solid #ffffff;}
  78.  
  79. ::-webkit-scrollbar {width:11px;border:5px solid #ffffff;border-right:5px solid #ffffff;background:#ffffff;}
  80.  
  81. /* --- CHARACTER CONTAINER SCROLLBAR --- */
  82.  
  83. .character_bio::-webkit-scrollbar-thumb {background:#2f4729;border:2px solid #ffffff;border-left:5px solid #ffffff;}
  84.  
  85. .character_bio::-webkit-scrollbar {width:10px;border:2px solid #ffffff;background:#ffffff;}
  86.  
  87. /* --- SELECTION ---*/
  88.  
  89. ::-moz-selection {color:#ffffff;background:#2f4729;opacity:1;}
  90.  
  91. ::selection {color:#ffffff;background:#2f4729;opacity:1;}
  92.  
  93. /* --- TUMBLR TOOLS --- */
  94.  
  95. iframe.tmblr-iframe {
  96. position:fixed;
  97. z-index:10!important;
  98. top:3px!important;
  99. right:0px!important;
  100. opacity:0;
  101. padding-right:60px;
  102. transform:scale(0.5);
  103. transform-origin:100% 0;
  104. -webkit-transform:scale(0.5);
  105. -webkit-transform-origin:100% 0;
  106. -o-transform:scale(0.5);
  107. -o-transform-origin:100% 0;
  108. -moz-transform:scale(0.5);
  109. -moz-transform-origin:100% 0;
  110. -ms-transform:scale(0.5);
  111. -ms-transform-origin:100% 0;
  112. transition:.2s ease-in-out;
  113. -webkit-transition:.2s ease-in-out;
  114. -moz-transition:.2s ease-in-out;
  115.  
  116. /* ---------- CHANGE TO 0 FOR WHITE TOOLS -- */
  117. filter:invert(1);
  118. -webkit-filter:invert(1);
  119. -o-filter:invert(1);
  120. -moz-filter:invert(1);
  121. -ms-filter:invert(1);
  122. }
  123.  
  124. iframe.tmblr-iframe:hover {opacity:0.5!important;}
  125.  
  126. .tcontrols {
  127. position:fixed;
  128. top:10px;
  129. right:15px;
  130. z-index:9;
  131. transition:.2s ease-in-out;
  132. -webkit-transition:.2s ease-in-out;
  133. -moz-transition:.2s ease-in-out;
  134. }
  135.  
  136. .tcontrols {color:#000000;font-size:14px;}
  137.  
  138. /* --- BODY --- */
  139.  
  140. body {
  141. margin: 0px;
  142. padding: 0px;
  143. font-family: 'Karla', sans-serif;
  144. color:#000000;
  145. font-size:10px;
  146. line-height:155%;
  147. font-weight:normal;
  148. word-wrap:normal;
  149. text-align:left;
  150. background-color:#ffffff;
  151. }
  152.  
  153. a {
  154. color:#000000;
  155. text-decoration:none;
  156. border:0;
  157. opacity:0.6;
  158. transition:0.2s ease-in-out;
  159. -webkit-transition:0.2s ease-in-out;
  160. -moz-transition:0.2s ease-in-out;
  161. }
  162.  
  163. a:hover {opacity:1.0;}
  164.  
  165. b,strong {font-weight:700;}
  166.  
  167. .et {position:fixed;color:#000000;right:8px;bottom:8px;opacity:0.6;text-transform:uppercase;font-size:calc(10px - 0.5px);z-index:10;}
  168.  
  169. /* --- HEADER --- */
  170.  
  171. #header {
  172. position:fixed;
  173. top:0;
  174. left:0;
  175. margin-top:35px;
  176. width:100%;
  177. height:450px;
  178. background-image:url('https://static.tumblr.com/zvesamf/Liqqaq1us/header.jpg');/* --- CHANGE HEADER HERE--- */
  179. background-position:top center;
  180. background-repeat:no-repeat;
  181. z-index:-2;
  182. }
  183.  
  184. #header, .header-scroll {transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;}
  185.  
  186. .header-scroll {width:100%!important;height:100%!important;}
  187.  
  188. .headertitle {
  189. position:fixed;
  190. top:230px;
  191. margin:0 auto;
  192. width:100%;
  193. text-align:center;
  194. z-index:-1;
  195. }
  196.  
  197. .title {
  198. display:inline-block;
  199. text-align:center;
  200. padding:20px 40px;
  201. color:#ffffff;
  202. font-family: 'Playfair Display', serif;
  203. font-size:20pt;
  204. font-weight:700;
  205. font-style:normal;/* --- or add italic for slanted text --- */
  206. text-transform:lowercase;
  207. outline:1px solid rgba(255,255,255,0.4);
  208. outline-offset:10px;
  209. background:rgba(255,255,255,0.4);
  210. }
  211.  
  212. /* --- CONTAINER --- */
  213.  
  214. .container {
  215. margin:0 auto;
  216. width:calc(100% - 100px);
  217. min-width:740px;
  218. padding:20px;
  219. margin-top:440px;
  220. background:transparent;/* --- Add hex code for colored container --- */
  221. }
  222.  
  223. .block_top, .block_bottom {position:fixed;background:#ffffff;height:35px;width:100%;z-index:8;}
  224.  
  225. .block_top {top:0px;left:0px;}
  226.  
  227. .block_bottom {bottom:0px;left:0px;}
  228.  
  229.  
  230. /* --- SIDEBAR --- */
  231.  
  232. .sidebar {
  233. margin:0 auto;
  234. padding:30px 20px 20px 20px;
  235. width:700px;
  236. font-size:9.5pt;
  237. text-align:center;
  238. background:#ffffff;
  239. }
  240.  
  241. .navigation {text-align:center;margin:25px 0px 15px 0px;}
  242.  
  243. .navigation a {
  244. display:inline-block;
  245. color:#000000;
  246. margin:0px 18px;
  247. text-decoration:none;
  248. border-bottom:5px solid #ffffff;/* --- Match to sidebar background --- */
  249. padding:0px 5px ;
  250. font-size:9.5pt;
  251. text-transform:lowercase;
  252. line-height:5pt;
  253. opacity:1;
  254. }
  255.  
  256. .navigation a:hover {border-bottom:5px solid #686b5f;}
  257.  
  258. /* --- CHARACTERS --- */
  259.  
  260. .character_cont {margin:0 auto;min-width:700px;padding:50px 0px;text-align:center;}
  261.  
  262. .character {display:inline-block;width:350px;height:300px;margin:15px 11px;border:15px solid #ffffff;}
  263.  
  264. .character img {width:350px;height:300px;}
  265.  
  266. .character_info {
  267. position:absolute;
  268. margin-top:-285px;
  269. margin-left:15px;
  270. width:280px;
  271. height:230px;
  272. padding:20px;
  273. font-size:9pt;
  274. background:#ffffff;
  275. opacity:0;
  276. transition:0.2s ease-in-out;
  277. -webkit-transition:0.2s ease-in-out;
  278. -moz-transition:0.2s ease-in-out;
  279. }
  280.  
  281. .character:hover .character_info {opacity:1;}
  282.  
  283. .character_info h1 {
  284. margin:0px 0px 15px 0px;
  285. font-family: 'Playfair Display', serif;
  286. font-size:16pt;
  287. color:#2f4729;
  288. font-weight:700;
  289. font-style:normal;/* --- or add italic for slanted text --- */
  290. text-transform:lowercase;
  291. }
  292.  
  293. .character_bio {
  294. width:260px;
  295. height:140px;
  296. padding:0px 10px;
  297. margin:14px 0px 0px 0px;
  298. overflow-x:hidden;
  299. overflow-y:scroll;
  300. }
  301.  
  302. .character_links {margin:0 auto;text-align:center;margin:10px 0px 0px 0px;padding:7px 0px 10px 0px;}
  303.  
  304. .character_links a {
  305. display:inline-block;
  306. color:#ffffff;
  307. margin:0px 8px;
  308. text-decoration:none;
  309. text-transform:lowercase;
  310. padding:1px 6px 0px 6px;
  311. font-size:9pt;
  312. background:#686b5f;
  313. opacity:1;
  314. }
  315.  
  316. </style>
  317. <body>
  318.  
  319.  
  320.  
  321.  
  322. <!-- DO NOT EDIT -->
  323. <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>
  324.  
  325.  
  326.  
  327.  
  328.  
  329.  
  330.  
  331.  
  332.  
  333. <!-- START HEADER AND HEADER TITLE -->
  334. <div id="header">
  335. <!-- TO EDIT HEADER IMAGE: 1. Search for .header in the css above and replace the URL with your desired image ----->
  336. </div>
  337.  
  338.  
  339. <div class="headertitle">
  340. <div class="title">
  341. Blog Title
  342. </div>
  343. </div>
  344.  
  345. <!-- END HEADER AND HEADER TITLE -->
  346.  
  347.  
  348.  
  349.  
  350.  
  351.  
  352.  
  353.  
  354.  
  355. <!-- START CONTAINER -->
  356. <div class="container">
  357.  
  358.  
  359.  
  360.  
  361.  
  362.  
  363.  
  364. <!-- START SIDEBAR -->
  365. <div class="sidebar">
  366. <!-- TO EDIT SIDEBAR -->
  367.  
  368. <!---
  369.  
  370. 1. Change the default text to your information
  371.  
  372. 2. To change the links, replace the "#" with your URL and the "Link" to the related link title
  373.  
  374.  
  375. ----->
  376.  
  377. <!--------------- START SIDEBAR BELOW --------------->
  378.  
  379. 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.
  380.  
  381. <div class="navigation">
  382. <a href="/">home</a>
  383. <a href="/ask">contact</a>
  384. <a href="#">link</a>
  385. <a href="#">link</a>
  386. <a href="#">link</a>
  387. <a href="#">link</a>
  388. </div>
  389.  
  390. </div>
  391. <!-- END SIDEBAR -->
  392.  
  393.  
  394.  
  395.  
  396.  
  397.  
  398.  
  399.  
  400.  
  401. <!-- START CHARACTERS -->
  402. <div class="character_cont">
  403.  
  404.  
  405.  
  406.  
  407.  
  408.  
  409. <!-----------------------------
  410.  
  411. CHARACTER START: COPY THIS SECTION TO ADD A NEW CHARACTER BLOCK
  412.  
  413. ------------------------------>
  414. <div class="character">
  415. <!-- Character Portrait --><img src="https://static.tumblr.com/zvesamf/eRuqaq5r4/character_1.jpg" />
  416.  
  417. <div class="character_info">
  418. <!-- Character Name ----><h1>Paul</h1>
  419. <!-- Personality ------->personality type ; age ; gender
  420.  
  421. <div class="character_bio">
  422. <!-- Character Bio ----->Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.
  423. <p>
  424. Vestibulum vitae nibh ac risus consectetur tristique. Aliquam non rutrum eros, vitae aliquet nisi. Curabitur eu tellus consequat, pulvinar justo vel, mollis quam. Nam id nisl vel enim efficitur egestas quis in metus. Donec cursus nibh in ultricies finibus. Ut et mi enim. Nullam fermentum bibendum justo, eu ultricies enim scelerisque porta. Nulla vitae nibh dignissim, tempus nisl nec, finibus diam. Mauris et luctus nisi, imperdiet consectetur enim. Suspendisse rutrum malesuada orci.
  425. </div>
  426.  
  427. <!-- Character Links Start -->
  428. <div class="character_links">
  429. <a href="#">Link</a>
  430. <a href="#">Link</a>
  431. <a href="#">Link</a>
  432. <a href="#">Link</a>
  433. </div>
  434. <!-- Character Links End -->
  435. </div>
  436. </div>
  437. <!-----------------------------
  438.  
  439. CHARACTER END
  440.  
  441. ------------------------------>
  442.  
  443.  
  444.  
  445.  
  446.  
  447.  
  448.  
  449.  
  450.  
  451. <!-----------------------------
  452.  
  453. CHARACTER START: COPY THIS SECTION TO ADD A NEW CHARACTER BLOCK
  454.  
  455. ------------------------------>
  456. <div class="character">
  457. <!-- Character Portrait --><img src="https://placehold.it/350X300" />
  458.  
  459. <div class="character_info">
  460. <!-- Character Name ----><h1>Character Name</h1>
  461. <!-- Personality ------->personality type ; age ; gender
  462.  
  463. <div class="character_bio">
  464. <!-- Character Bio ----->Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.
  465. <p>
  466. Vestibulum vitae nibh ac risus consectetur tristique. Aliquam non rutrum eros, vitae aliquet nisi. Curabitur eu tellus consequat, pulvinar justo vel, mollis quam. Nam id nisl vel enim efficitur egestas quis in metus. Donec cursus nibh in ultricies finibus. Ut et mi enim. Nullam fermentum bibendum justo, eu ultricies enim scelerisque porta. Nulla vitae nibh dignissim, tempus nisl nec, finibus diam. Mauris et luctus nisi, imperdiet consectetur enim. Suspendisse rutrum malesuada orci.
  467. </div>
  468.  
  469. <!-- Character Links Start -->
  470. <div class="character_links">
  471. <a href="#">Link</a>
  472. <a href="#">Link</a>
  473. <a href="#">Link</a>
  474. <a href="#">Link</a>
  475. </div>
  476. <!-- Character Links End -->
  477. </div>
  478. </div>
  479. <!-----------------------------
  480.  
  481. CHARACTER END
  482.  
  483. ------------------------------>
  484.  
  485.  
  486.  
  487.  
  488.  
  489.  
  490.  
  491.  
  492.  
  493. </div>
  494. <!-- END CHARACTERS -->
  495.  
  496. </div>
  497. <!-- END CONTAINER -->
  498.  
  499.  
  500.  
  501.  
  502.  
  503.  
  504.  
  505.  
  506. <!-- ADDITIONAL SCRIPTS -->
  507.  
  508. <!-- Auto Fill Start -->
  509. <script>
  510. $(document).ready(function(){
  511. var scrollTop = 0;
  512. $(window).scroll(function(){
  513. scrollTop = $(window).scrollTop();
  514. $('.counter').html(scrollTop);
  515. if (scrollTop >= 5) {
  516. $('#header').addClass('header-scroll');
  517. } else if (scrollTop < 5) {
  518. $('#header').removeClass('header-scroll');
  519. }
  520. });
  521. });
  522. </script>
  523. <!-- Auto Fill End -->
  524.  
  525. <script>
  526. $(window).scroll(function(){
  527. $(".headertitle").css("opacity", 1 - $(window).scrollTop() / 300);
  528. });
  529. </script>
  530.  
  531.  
  532. </body>
  533. </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!