API tools faq
paste
Advertisement
MystiqueAquanian

Characters Page 2 by hendrixRPH

MystiqueAquanian
Dec 24th, 2016
113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.47 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7. <title>Pantheon Character Theme</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9.  
  10. <!--
  11.  
  12. Character Page Theme: Pantheon
  13. Made by hendrixrph. Please do not remove the credit or redistribute, thank you!
  14.  
  15. -->
  16.  
  17. <style>
  18.  
  19. ::-webkit-scrollbar {background-color:#aaa; height:4px; width:6px}
  20. ::-webkit-scrollbar-thumb:vertical {background-color:#888; height:50px}
  21. ::-webkit-scrollbar-thumb:horizontal {background-color:#888; height:8px!important}
  22.  
  23. * {
  24. margin:0;
  25. padding:0;
  26. box-sizing:border-box;
  27. }
  28.  
  29. .topbar {
  30. width:1000px;
  31. margin:0 auto;
  32. background-color:#333;
  33. height:50px;
  34. padding:0 20px;
  35. }
  36.  
  37. .topbar h1 {
  38. color:#fff;
  39. float:left;
  40. font-family:Arial, sans-serif;
  41. text-transform:uppercase;
  42. font-style:italic;
  43. position: relative;
  44. top: 50%;
  45. transform: translateY(-50%);
  46. }
  47.  
  48. .nav {
  49. float:right;
  50. position: relative;
  51. top: 50%;
  52. transform: translateY(-50%);
  53. }
  54.  
  55. .nav li {
  56. list-style-type:none;
  57. display:inline-block;
  58. margin:0 10px;
  59. }
  60.  
  61. .nav li a {
  62. color:#fff;
  63. font-family:Arial, sans-serif;
  64. text-decoration:none;
  65. text-transform:lowercase;
  66. }
  67.  
  68. .boxwrapper {
  69. width:1000px;
  70. margin:0 auto;
  71. }
  72.  
  73. .box {
  74. width:500px;
  75. height:350px;
  76. background-color:#eee;
  77. position:relative;
  78. float:left;
  79. transition:background-image 1s;
  80. }
  81.  
  82. .box h1 {
  83. position: relative;
  84. top: 50%;
  85. transform: translateY(-50%);
  86. text-align:center;
  87. font-family:Arial, sans-serif;
  88. font-style:italic;
  89. text-transform:uppercase;
  90. transition:opacity 1s;
  91. color:#fff;
  92. border:1px solid #fff;
  93. max-width:300px;
  94. margin:0 auto;
  95. padding:40px 0;
  96. background-color:rgba(0,0,0,0.2);
  97. background-size:100%;
  98. text-shadow:1px 1px #000;
  99. }
  100.  
  101. .box:hover h1 {
  102. opacity:0;
  103. }
  104.  
  105.  
  106. .hoverbox {
  107. position:absolute;
  108. top:25px;
  109. left:25px;
  110. width:450px;
  111. height:300px;
  112. background:rgba(0,0,0,0.7);
  113. opacity:0;
  114. transition:all 1s;
  115. }
  116.  
  117. .box:hover .hoverbox {
  118. opacity:1;
  119. }
  120.  
  121. .hoverbox::after {
  122. content:'';
  123. clear:both;
  124. }
  125.  
  126. .hoverbox img {
  127. width:140px;
  128. height:290px;
  129. margin:5px;
  130. float:left;
  131. }
  132.  
  133. .hovertext {
  134. width:295px;
  135. height:290px;
  136. margin:5px;
  137. margin-left:0;
  138. padding:10px;
  139. float:left;
  140. border:1px solid rgba(255,255,255,0.5);
  141. color:#fff;
  142. font-family:Arial, sans-serif;
  143. font-size:12px;
  144. overflow-y:scroll;
  145. }
  146.  
  147. .hovertext p {
  148. border-top:1px solid rgba(255,255,255,0.3);
  149. padding:6px 0;
  150. }
  151.  
  152. .hovertext p:first-of-type {
  153. border-top:none;
  154. }
  155.  
  156. .hovertext ul {
  157. margin-bottom:6px;
  158. }
  159.  
  160. .hovertext li {
  161. margin-left:20px;
  162. }
  163.  
  164. .hovertext b {
  165. letter-spacing:1px;
  166. }
  167.  
  168. .credit {
  169. position:fixed;
  170. margin:7px 13px;
  171. padding:3px 5px;
  172. font-size:8px;
  173. bottom:0;
  174. right:0;
  175. background-color:#888;
  176. color:#fff;
  177. opacity:0.5;
  178. transition:0.75s all;
  179. }
  180.  
  181. .credit:hover {
  182. opacity:0.8;
  183. letter-spacing:normal;
  184. }
  185.  
  186.  
  187.  
  188. /* Character Classes
  189.  
  190. Sorry this is a little obnoxious, but on the bright side, doing it this wawy keeps the HTML you have to copy and paste much cleaner.
  191.  
  192. These are where you designate the background images for each of your boxes. For each character, there are two blocks of CSS, one for the image you want normally, and the other for the image you want when you hover over the box.
  193.  
  194. Here is how you need to fill it out. Replace the parts that are in all caps.
  195.  
  196. .CLASSNAME {
  197. background-image:url("URL OF NON-HOVER IMAGE");
  198. }
  199. .CLASSNAME:hover {
  200. background-image:url("URL OF HOVER IMAGE");
  201. }
  202.  
  203. These images are 500px by 350px.
  204.  
  205. */
  206.  
  207. .char1 {
  208. background-image:url("http://static.tumblr.com/tm8oez9/A7Gnqmazr/500by350.png");
  209. }
  210. .char1:hover {
  211. background-image:url("http://static.tumblr.com/tm8oez9/rLunqmc20/500invert.png");
  212. }
  213.  
  214. .char2 {
  215. background-image:url("http://static.tumblr.com/tm8oez9/A7Gnqmazr/500by350.png");
  216. }
  217. .char2:hover {
  218. background-image:url("http://static.tumblr.com/tm8oez9/rLunqmc20/500invert.png");
  219. }
  220.  
  221. .char3 {
  222. background-image:url("http://static.tumblr.com/tm8oez9/A7Gnqmazr/500by350.png");
  223. }
  224. .char3:hover {
  225. background-image:url("http://static.tumblr.com/tm8oez9/rLunqmc20/500invert.png");
  226. }
  227.  
  228. .char4 {
  229. background-image:url("http://static.tumblr.com/tm8oez9/A7Gnqmazr/500by350.png");
  230. }
  231. .char4:hover {
  232. background-image:url("http://static.tumblr.com/tm8oez9/rLunqmc20/500invert.png");
  233. }
  234.  
  235.  
  236.  
  237.  
  238.  
  239.  
  240. </style>
  241.  
  242. </head>
  243.  
  244. <body>
  245.  
  246. <div class="topbar">
  247. <h1>Pantheon Theme</h1> <!-- Title goes here -->
  248. <ul class="nav"> <!-- Links go in here -->
  249. <li><a href="#">Link</a></li>
  250. <li><a href="#">Link</a></li>
  251. <li><a href="#">Link</a></li>
  252. </ul>
  253. </div>
  254.  
  255. <div class="boxwrapper">
  256.  
  257. <!-- START COPY PASTE -->
  258. <div class="box char1"> <!-- replace "char1" with whatever character class you made for the background images. See the comments in the CSS for more information. -->
  259. <h1>Character 1</h1>
  260. <div class="hoverbox"> <!-- The box that appears on hover -->
  261. <img src=""> <!-- The sidebar image -->
  262. <div class="hovertext"> <!-- The text box you get when you hover over stuff. -->
  263. <p>The side image next to this is 140px by 290px.</p>
  264. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie venenatis auctor. Proin hendrerit cursus egestas. Mauris fringilla enim sit amet quam semper dictum. Donec blandit, tellus vitae gravida tempor, ex elit maximus metus, ac finibus turpis lectus sit amet ante. In aliquam dignissim ultricies. Sed mi metus, mattis in est id, convallis pharetra erat. Fusce sapien mauris, sagittis ac sollicitudin sit amet, ornare ut metus. Donec tempor tincidunt magna, in maximus augue rhoncus eu. Nulla facilisi.</p>
  265. </div><!-- End hover text-->
  266. </div><!-- End hover box -->
  267. </div>
  268. <!-- END COPY PASTE -->
  269.  
  270. <!-- START COPY PASTE -->
  271. <div class="box char2"> <!-- replace "char2" with whatever character class you made for the background images. See the comments in the CSS for more information. -->
  272. <h1>Character 2</h1>
  273. <div class="hoverbox"> <!-- The box that appears on hover -->
  274. <img src=""> <!-- The sidebar image -->
  275. <div class="hovertext"> <!-- The text box you get when you hover over stuff. -->
  276. <p>The side image next to this is 140px by 290px.</p>
  277. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie venenatis auctor. Proin hendrerit cursus egestas. Mauris fringilla enim sit amet quam semper dictum. Donec blandit, tellus vitae gravida tempor, ex elit maximus metus, ac finibus turpis lectus sit amet ante. In aliquam dignissim ultricies. Sed mi metus, mattis in est id, convallis pharetra erat. Fusce sapien mauris, sagittis ac sollicitudin sit amet, ornare ut metus. Donec tempor tincidunt magna, in maximus augue rhoncus eu. Nulla facilisi.</p>
  278. </div><!-- End hover text-->
  279. </div><!-- End hover box -->
  280. </div>
  281. <!-- END COPY PASTE -->
  282.  
  283. <!-- START COPY PASTE -->
  284. <div class="box char3"> <!-- replace "char3" with whatever character class you made for the background images. See the comments in the CSS for more information. -->
  285. <h1>Character 3</h1>
  286. <div class="hoverbox"> <!-- The box that appears on hover -->
  287. <img src=""> <!-- The sidebar image -->
  288. <div class="hovertext"> <!-- The text box you get when you hover over stuff. -->
  289. <p>The side image next to this is 140px by 290px.</p>
  290. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie venenatis auctor. Proin hendrerit cursus egestas. Mauris fringilla enim sit amet quam semper dictum. Donec blandit, tellus vitae gravida tempor, ex elit maximus metus, ac finibus turpis lectus sit amet ante. In aliquam dignissim ultricies. Sed mi metus, mattis in est id, convallis pharetra erat. Fusce sapien mauris, sagittis ac sollicitudin sit amet, ornare ut metus. Donec tempor tincidunt magna, in maximus augue rhoncus eu. Nulla facilisi.</p>
  291. </div><!-- End hover text-->
  292. </div><!-- End hover box -->
  293. </div>
  294. <!-- END COPY PASTE -->
  295.  
  296. <!-- START COPY PASTE -->
  297. <div class="box char4"> <!-- replace "char4" with whatever character class you made for the background images. See the comments in the CSS for more information. -->
  298. <h1>Character 4</h1>
  299. <div class="hoverbox"> <!-- The box that appears on hover -->
  300. <img src=""> <!-- The sidebar image -->
  301. <div class="hovertext"> <!-- The text box you get when you hover over stuff. -->
  302. <p>The side image next to this is 140px by 290px.</p>
  303. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie venenatis auctor. Proin hendrerit cursus egestas. Mauris fringilla enim sit amet quam semper dictum. Donec blandit, tellus vitae gravida tempor, ex elit maximus metus, ac finibus turpis lectus sit amet ante. In aliquam dignissim ultricies. Sed mi metus, mattis in est id, convallis pharetra erat. Fusce sapien mauris, sagittis ac sollicitudin sit amet, ornare ut metus. Donec tempor tincidunt magna, in maximus augue rhoncus eu. Nulla facilisi.</p>
  304. </div><!-- End hover text-->
  305. </div><!-- End hover box -->
  306. </div>
  307. <!-- END COPY PASTE -->
  308.  
  309.  
  310.  
  311. </div>
  312.  
  313. <a href="http://hendrixrph.tumblr.com"><div class="credit">hendrixrph</div></a>
  314.  
  315. </body>
  316.  
  317. </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!