API tools faq
paste
cvndythemes

Character Page #02

cvndythemes
Aug 23rd, 2015
6,550
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.18 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. >> ETHEREAL THEMES // CHARACTER PAGE #02
  4.  
  5. Designed by etherealthemes
  6. etherealthemes.tumblr.com
  7. ⓒ 2016 - 2017
  8.  
  9. >> TERMS OF USE
  10.  
  11. Do NOT remove the credit
  12. Do NOT claim as your own
  13.  
  14. *You can move the credit, but leave it visible
  15. *Edit as much as you'd like
  16. *Feel free to ask about basic customization
  17. *Theme suggestions always welcomed
  18.  
  19. >> EXTRAS
  20.  
  21. Fonts by Google Fonts
  22.  
  23. NOTE:
  24. This page will auto center and auto align the characters. While editing, the characters might be mis-aligned. Once you go to yoururl.tumblr.com/page the characters will auto-fill the screen depending on the screen size that's being used to view.
  25.  
  26. Inverting Tumblr Controls - Search "Tumblr Controls" and delete the second code with the invert settings.
  27.  
  28. To change colors, press CTRL+F and "search for" the original hex code. Then change the color with the "replace with" to change all the associated colors. Then you can go through and tweak individual colors. This just makes it easier to go from light to dark without having to go through each color.
  29.  
  30. ACCENT COLORS CHEATSHEET:
  31. Pink - Topbar Title - #f3b9cf
  32. Blue - Border - #9bdcf7
  33. Black - Link Hover - #101010
  34.  
  35.  
  36. -->
  37.  
  38. <!DOCTYPE html>
  39. <html>
  40. <title> Page Title </title>
  41.  
  42. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  43.  
  44. <link href='http://fonts.googleapis.com/css?family=Work+Sans|Roboto' rel='stylesheet' type='text/css'>
  45.  
  46. <style type="text/css">
  47.  
  48. /* --- Body Scrollbar --- */
  49.  
  50. ::-webkit-scrollbar {width:7px;background-color:#ffffff;}
  51. ::-webkit-scrollbar-thumb {background-color:#eeeeee;}
  52. ::-webkit-scrollbar-corner {background-color:#ffffff;}
  53.  
  54. /* --- Character Scrollbars --- */
  55.  
  56. div::-webkit-scrollbar {width:4px;background-color:#ffffff;}
  57. div::-webkit-scrollbar-thumb {background-color:#dfdfdf;}
  58. div::-webkit-scrollbar-corner {background-color:#ffffff;}
  59.  
  60. /* --- General --- */
  61.  
  62. body {
  63. margin:0px;
  64. font-family: 'Open Sans', sans-serif;
  65. color:#8f8f8f;
  66. font-size:10px;
  67. line-height:12px;
  68. background-color:#ffffff;
  69. }
  70.  
  71.  
  72. a { color:#adadad; text-decoration:none;}
  73. b, strong {color:#777777;}
  74.  
  75. p {
  76. text-align: justify;
  77. -moz-text-align-last: center!important;
  78. text-align-last: center!important;
  79. }
  80.  
  81. hr {
  82. display: block;
  83. margin:10px 0 15px 0;
  84. margin-left: auto;
  85. margin-right: auto;
  86. border-style: inset;
  87. border-color:#aa4455;
  88. border-bottom: 1px;
  89.  
  90. }
  91.  
  92. #et {
  93. background:transparent;
  94. color:#000000;
  95. background:transparent;
  96. right:0px;
  97. bottom:0px;
  98. padding:5px;
  99. position:fixed;
  100. letter-spacing:1px;
  101. opacity:0.4;
  102. }
  103.  
  104. #et a {
  105. color:#000000;
  106. text-decoration:none;
  107. border:0px;
  108. }
  109.  
  110. /* --- Tumblr Controls --- */
  111.  
  112. iframe.tmblr-iframe {
  113. z-index:999999!important;
  114. top:0px!important;
  115. right:-10px!important;
  116. opacity:0.4!important;
  117. padding-right:10px;
  118. transform:scale(0.6);
  119. transform-origin:100% 0;
  120. -webkit-transform:scale(0.6);
  121. -webkit-transform-origin:100% 0;
  122. -o-transform:scale(0.6);
  123. -o-transform-origin:100% 0;
  124. -moz-transform:scale(0.6);
  125. -moz-transform-origin:100% 0;
  126. -ms-transform:scale(0.6);
  127. -ms-transform-origin:100% 0;
  128. }
  129.  
  130. iframe.tmblr-iframe {
  131. filter:invert(1);
  132. -webkit-filter:invert(1);
  133. -o-filter:invert(1);
  134. -moz-filter:invert(1);
  135. -ms-filter:invert(1);
  136. }
  137.  
  138.  
  139. /* --- Topbar --- */
  140.  
  141. #topbar {
  142. position:fixed;
  143. top:0px;
  144. left:0px;
  145. width:100%;
  146. height:90px;
  147. text-align:center;
  148. background-color:#ffffff;
  149. border-bottom:1px solid #eeeeee;
  150. z-index:9999!important;
  151. }
  152.  
  153. .topbartitle {
  154. margin-top:25px;
  155. margin-bottom:20px;
  156. font-family: 'Work Sans', sans-serif;
  157. font-weight:800;
  158. font-size:32px;
  159. letter-spacing:-1px;
  160. text-transform:uppercase;
  161. text-align:center;
  162. font-style:italic;
  163. color:#f3b9cf;
  164. }
  165.  
  166. #topbar a {
  167. padding:5px 10px 5px 10px;
  168. color:#000000;
  169. font-size:10px;
  170. text-transform:uppercase;
  171. text-decoration:none;
  172. border-bottom:1px solid #ffffff;
  173. -webkit-transition: all 0.3s ease-in-out;
  174. -moz-transition: all 0.3s ease-in-out;
  175. -o-transition: all 0.3s ease-in-out;
  176. }
  177.  
  178. #topbar a:hover {
  179. color:#000000;
  180. border-bottom:1px solid #dddddd;
  181. }
  182.  
  183. /* --- Container --- */
  184.  
  185. #container {
  186. margin: 0 auto;
  187. width:80%;
  188. }
  189.  
  190. #content {
  191. width:100%;
  192. margin: 0 auto;
  193. margin-top:130px;
  194. float:center;
  195. }
  196.  
  197. /* --- Character Boxes --- */
  198.  
  199. #characters {
  200. display:inline-block;
  201. width:240px;
  202. height:290px;
  203. margin:0px 15px 20px 15px;
  204. background-size:100%;
  205. font-family: 'Roboto', sans-serif;
  206. font-size:10px;
  207. letter-spacing:0.5px;
  208. color:#000;
  209. padding:5px;
  210. border:10px solid #ffffff;
  211. -webkit-transition: all 350ms linear;
  212. -moz-transition: all 350ms linear;
  213. -ms-transition: all 350ms linear;
  214. -o-transition: all 350ms linear;
  215. transition: all 350ms linear;
  216. }
  217.  
  218. #characters:hover {
  219. border:10px solid #fff;
  220. }
  221.  
  222. #characters:hover .charbio {
  223. opacity:1;
  224. -webkit-transition: all 50ms linear;
  225. -moz-transition: all 50ms linear;
  226. -ms-transition: all 50ms linear;
  227. -o-transition: all 50ms linear;
  228. transition: all 50ms linear;
  229. }
  230.  
  231. #characterimg {
  232. margin-top:-5px;
  233. margin-left:-5px;
  234. max-width:250px;
  235. height:300px;
  236. z-index:-1;
  237. }
  238.  
  239. .charbio {
  240. padding:5px;
  241. border-top:15px solid #f8f8f8;
  242. border-left:5px solid #f8f8f8;
  243. border-right: 5px solid #f8f8f8;;
  244. margin-top:-280px!important;
  245. margin-left:12px;
  246. width:201px;
  247. height:239px;
  248. text-align:center;
  249. margin-top:-100px;
  250. background:#f8f8f8!important;
  251. z-index:100;
  252. position:absolute;
  253. overflow:scroll;
  254. opacity:0;
  255. -webkit-transition: all 50ms linear;
  256. -moz-transition: all 50ms linear;
  257. -ms-transition: all 50ms linear;
  258. -o-transition: all 50ms linear;
  259. transition: all 50ms linear;
  260. }
  261.  
  262.  
  263. .charbio a{
  264. display:inline-block;
  265. font-size:10px;
  266. color:#000000;
  267. text-transform:lowercase;
  268. font-style:italic;
  269. margin:0 2px 3px 2px;
  270. letter-spacing:1px;
  271. padding:3px;
  272. border-bottom:1px solid #ffffff;
  273. }
  274.  
  275. .charbio a:hover {
  276. color:#000000;
  277. border-bottom:1px solid #101010;
  278. }
  279.  
  280. /* --- Titles --- */
  281.  
  282. h1 {
  283. color:#000000;
  284. font-size:15px;
  285. letter-spacing:0px;
  286. font-style:italic;
  287. padding:5px;
  288. margin:0 0 5px 0;
  289. text-align:center;
  290. text-transform:uppercase;
  291. }
  292.  
  293. </style>
  294.  
  295. </head>
  296. <body>
  297.  
  298.  
  299. <div id="container">
  300. <div id="content">
  301. <center>
  302.  
  303.  
  304.  
  305. <!-- Start Example Character Box -->
  306. <div id="characters">
  307. <div id="characterimg">
  308. <img src="http://68.media.tumblr.com/7199045671f469a47b9a556f5043f613/tumblr_odohxb6eU51ucjeiho4_250.jpg" />
  309. <!-- Character photo above, it's 250X300 -->
  310. </div>
  311.  
  312. <div class="charbio">
  313. <h1>Harry</h1> <!-- Character name goes here -->
  314.  
  315. <!-- You can move the links below the bio and have as many as you want -->
  316. <a href="/">Link</a>
  317. <a href="/">Link</a>
  318. <a href="/">Link</a>
  319. <a href="/">Link</a>
  320.  
  321. <hr> <!-- Adds a line break -->
  322.  
  323. Character bio goes here. Lorem ipsum dolor sit amet, nunc quam id sed aliquet volutpat, praesent eu habitant eu eget, qui mauris et dapibus risus nulla, condimentum in tincidunt. Sed at, dignissim est rhoncus blandit erat sit tempus, sodales volutpat nibh sit suscipit, quis metus phasellus sit quis. Tincidunt ornare condimentum dignissim, non eu vel proin vitae, faucibus ut porta, purus feugiat elementum consequat et. Bibendum faucibus justo.
  324. <p><!-- This adds a space between lines -->
  325. lorem odio ut nibh, natoque magna adipiscing nec. Et dui et voluptatem, diam auctor augue id sed quis mattis, enim tellus enim, suscipit felis mollis ornare hymenaeos sem eros. Libero mollis ut fusce nulla, quis cras sem praesent consequat proin id, libero consequat mauris vestibulum donec.
  326.  
  327. </div></div>
  328. <!-- End Example Character Box -->
  329.  
  330.  
  331.  
  332.  
  333.  
  334.  
  335.  
  336.  
  337.  
  338. <!-- Start Character Box -->
  339. <div id="characters">
  340. <div id="characterimg">
  341. <img src="http://placehold.it/250X300" />
  342. <!-- Character photo above -->
  343. </div>
  344.  
  345. <div class="charbio">
  346. <h1>Name</h1> <!-- Character name goes here -->
  347.  
  348. <!-- You can move the links below the bio and have as many as you want -->
  349. <a href="/">Link</a>
  350. <a href="/">Link</a>
  351. <a href="/">Link</a>
  352. <a href="/">Link</a>
  353.  
  354. <hr> <!-- Adds a line break -->
  355.  
  356. Character bio goes here. Lorem ipsum dolor sit amet, nunc quam id sed aliquet volutpat, praesent eu habitant eu eget, qui mauris et dapibus risus nulla, condimentum in tincidunt. Sed at, dignissim est rhoncus blandit erat sit tempus, sodales volutpat nibh sit suscipit, quis metus phasellus sit quis. Tincidunt ornare condimentum dignissim, non eu vel proin vitae, faucibus ut porta, purus feugiat elementum consequat et. Bibendum faucibus justo.
  357. <p><!-- This adds a space between lines -->
  358. lorem odio ut nibh, natoque magna adipiscing nec. Et dui et voluptatem, diam auctor augue id sed quis mattis, enim tellus enim, suscipit felis mollis ornare hymenaeos sem eros. Libero mollis ut fusce nulla, quis cras sem praesent consequat proin id, libero consequat mauris vestibulum donec.
  359.  
  360. </div></div>
  361. <!-- End Character Box -->
  362.  
  363.  
  364.  
  365.  
  366.  
  367.  
  368.  
  369.  
  370.  
  371. <!-- Start Character Box -->
  372. <div id="characters">
  373. <div id="characterimg">
  374. <img src="http://placehold.it/250X300" />
  375. <!-- Character photo above -->
  376. </div>
  377.  
  378. <div class="charbio">
  379. <h1>Name</h1> <!-- Character name goes here -->
  380.  
  381. <!-- You can move the links below the bio and have as many as you want -->
  382. <a href="/">Link</a>
  383. <a href="/">Link</a>
  384. <a href="/">Link</a>
  385. <a href="/">Link</a>
  386.  
  387. <hr> <!-- Adds a line break -->
  388.  
  389. Character bio goes here. Lorem ipsum dolor sit amet, nunc quam id sed aliquet volutpat, praesent eu habitant eu eget, qui mauris et dapibus risus nulla, condimentum in tincidunt. Sed at, dignissim est rhoncus blandit erat sit tempus, sodales volutpat nibh sit suscipit, quis metus phasellus sit quis. Tincidunt ornare condimentum dignissim, non eu vel proin vitae, faucibus ut porta, purus feugiat elementum consequat et. Bibendum faucibus justo.
  390. <p><!-- This adds a space between lines -->
  391. lorem odio ut nibh, natoque magna adipiscing nec. Et dui et voluptatem, diam auctor augue id sed quis mattis, enim tellus enim, suscipit felis mollis ornare hymenaeos sem eros. Libero mollis ut fusce nulla, quis cras sem praesent consequat proin id, libero consequat mauris vestibulum donec.
  392.  
  393. </div></div>
  394. <!-- End Character Box -->
  395.  
  396.  
  397.  
  398.  
  399.  
  400.  
  401.  
  402.  
  403.  
  404.  
  405.  
  406.  
  407.  
  408.  
  409.  
  410.  
  411.  
  412.  
  413. </div></div></div>
  414. <!-- End Main Container -->
  415.  
  416.  
  417.  
  418.  
  419.  
  420. <!-- Start Topbar -->
  421. <div id="topbar">
  422. <div class="topbartitle">Character Page</div>
  423.  
  424. <a href="#">Link</a>
  425. <a href="#">Link</a>
  426. <a href="#">Link</a>
  427. <a href="#">Link</a>
  428. <a href="#">Link</a>
  429. <a href="#">Link</a>
  430. <a href="#">Link</a>
  431.  
  432. </div></div>
  433. <!-- End Topbar -->
  434.  
  435. <div id="et"><a href="http://etherealthemes.co.vu/"><i class="fa fa-paint-brush"></i></a></div>
  436.  
  437. </div>
  438. </div>
  439.  
  440.  
  441. </body></html>
  442. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!