API tools faq
paste
pegasusthemes

page 11 // hydra

pegasusthemes
Sep 2nd, 2018 (edited)
1,197
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.76 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-- THEME BY @LEEJORDAN / @VENUSTHMS
  5. do not remove the credit
  6.  
  7. -------------------------------------------------------------------------
  8.  
  9. - terms of use: venusthms.tumblr.com/terms
  10.  
  11. - message me if you got any problems or questions about the code
  12.  
  13. - you'll find instructions about customization through out the code
  14.  
  15. - icon font https://honeybee.suiomi.com/
  16.  
  17. - vertical carousel tutorial https://yeolithm.com/carousel/tutorial
  18.  
  19. - DON'T WORRY THAT THE CODE LOOKS WEIRD ON THE CUSTOMIZATION PAGE ;
  20. it will look fine on the actual page
  21.  
  22. ---------------------------------------------------------------------->
  23.  
  24. <title>explore</title><link rel="shortcut icon" href="{Favicon}"> <!-- change tab title here -->
  25.  
  26. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Karla|Lora|Quicksand|Raleway" rel="stylesheet"><link rel="stylesheet" type="text/css" href="//venusthms.github.io/pages/hydra/style.css">
  27.  
  28.  
  29. <style type="text/css">
  30.  
  31. /***** scrollbar ******/
  32.  
  33. ::-webkit-scrollbar {
  34. width:5px;
  35. height:17px;
  36. background-color: #fff;
  37. }
  38. ::-webkit-scrollbar-track {
  39. background-color: #fff;
  40. }
  41. ::-webkit-scrollbar-thumb {
  42. background-color: #f6f6f6;
  43. min-height:24px;
  44. min-width:24px;
  45. }
  46.  
  47. /***** selection ******/
  48.  
  49. ::selection {
  50. background: #f6f6f6;
  51. color: #000;
  52. }
  53. ::-moz-selection {
  54. background: #f6f6f6;
  55. color: #000;
  56. }
  57.  
  58. /***** cursors ******/
  59.  
  60. a {
  61. cursor: help;
  62. }
  63.  
  64. [class^="label_"] {
  65. cursor: pointer;
  66. }
  67.  
  68. /***** tumblr controls ******/
  69. /* (by @cyantists) */
  70.  
  71. iframe.tmblr-iframe {
  72. z-index:99999999999999!important;
  73. top:0!important;
  74. right:0!important;
  75. opacity:0.4;
  76. filter:invert(1) contrast(150%);
  77. -webkit-filter:invert(1) contrast(150%);
  78. -o-filter:invert(1) contrast(150%);
  79. -moz-filter:invert(1) contrast(150%);
  80. -ms-filter:invert(1) contrast(150%);
  81. transform:scale(0.65);
  82. transform-origin:100% 0;
  83. -webkit-transform:scale(0.65);
  84. -webkit-transform-origin:100% 0;
  85. -o-transform:scale(0.65);
  86. -o-transform-origin:100% 0;
  87. -moz-transform:scale(0.65);
  88. -moz-transform-origin:100% 0;
  89. -ms-transform:scale(0.65);
  90. -ms-transform-origin:100% 0;}
  91.  
  92. iframe.tmblr-iframe:hover {
  93. opacity:0.6!important;}
  94.  
  95. /***** general ******/
  96.  
  97. body {
  98. background: #fff;
  99. font-family: 'karla';
  100. text-align: center;
  101. font-size: 14px;
  102. color: #444;
  103. }
  104.  
  105. /***** accent colour ******/
  106.  
  107. #button_a:checked ~ #navigation .label_a,
  108. #button_b:checked ~ #navigation .label_b,
  109. #button_c:checked ~ #navigation .label_c,
  110. #button_d:checked ~ #navigation .label_d,
  111. .bg > span,
  112. .panel_c a::after,
  113. .panel_b a::after,
  114. .panel_a a::after {
  115. background: #eda7bc;
  116. }
  117.  
  118. .text i, a, .back:hover {
  119. color: #eda7bc;
  120. }
  121.  
  122. /***** container ******/
  123.  
  124. #carousel {
  125. width: 600px;
  126. height: 400px;
  127. background-color: #fff; /*container background*/
  128. border-radius: 5px;
  129. }
  130.  
  131. /***** buttons ******/
  132.  
  133. [class^="label_"] {
  134. color: #aaa;
  135. background-color: #f6f6f6; /*buttons background*/
  136. border-radius: 10px;
  137. }
  138.  
  139. [class^="label_"]:hover {/*button hover*/
  140. color: #444;
  141. background-color: #ffeed9;
  142. }
  143.  
  144. #button_a:checked ~ #navigation .label_a,
  145. #button_b:checked ~ #navigation .label_b,
  146. #button_c:checked ~ #navigation .label_c,
  147. #button_d:checked ~ #navigation .label_d {/*button checked*/
  148. cursor: default;
  149. color: #fff;
  150. }
  151.  
  152. /* delete this if you don't want the line between the buttons */
  153. .line {
  154. position: absolute;
  155. display: inline-block;
  156. height: 70%;
  157. z-index: -1;
  158. top: 25px;
  159. bottom: 0;
  160. left: 50%;
  161. border-left: 1px dashed #ccc;
  162. }
  163. {block:Following}
  164. .line {
  165. height: 80%;
  166. }
  167. {/block:Following}
  168. /* delete until here */
  169.  
  170. /***** about section ******/
  171.  
  172. .text {
  173. text-align: justify;
  174. }
  175.  
  176. .panel_a img { /*icon*/
  177. width: 45px;
  178. height:45;
  179. border-radius: 10px;
  180. }
  181.  
  182. .speech-bubble {/*speech bubble*/
  183. position: relative;
  184. padding: 10px;
  185. width: 88%;
  186. margin-left: 60px;
  187. height: 45px;
  188. background: #f6f6f6; /*speech bubble colour*/
  189. border-radius: 10px;
  190. }
  191.  
  192. .speech-bubble:after {
  193. content: '';
  194. position: absolute;
  195. left: 0;
  196. top: 50%;
  197. width: 0;
  198. height: 0;
  199. border: 8px solid transparent;
  200. border-left: 0;
  201. border-right-color: #f6f6f6; /*speech bubble colour*/
  202. margin-top: -8px;
  203. margin-left: -8px;
  204. }
  205.  
  206. .bg {
  207. background: #f6f6f6; /*progress bar background*/
  208. }
  209.  
  210. /***** faq section ******/
  211.  
  212. .panel_b .a, .panel_b .q {
  213. text-align: justify;
  214. }
  215.  
  216. .panel_b .q:before { /*icon before question*/
  217. content:'\eb31';
  218. font-family:'honeybee';
  219. }
  220.  
  221. .panel_b .a:before {/*icon before answer*/
  222. content:'\ea13';
  223. font-family:'honeybee';
  224. }
  225.  
  226. /***** tag section ******/
  227.  
  228. .panel_c {
  229. text-align: left;
  230. }
  231.  
  232. /* delete this if you don't want the hover effect on links*/
  233. .panel_a a::after, .panel_b a::after, .panel_c a::after {
  234. content: '';
  235. display: block;
  236. width: 0;
  237. height: 1px;
  238. transition: width .3s;
  239. }
  240.  
  241. .panel_a a:hover::after, .panel_b a:hover::after, .panel_c a:hover::after {
  242. width: 100%;
  243. //transition: width .3s;
  244. }
  245. /* delete until here */
  246.  
  247. /* delete this if you don't want the hashtag infront of the tags */
  248. .panel_c a:before {
  249. content: '#';
  250. margin-right: 2px;
  251. }
  252. /* delete until here */
  253.  
  254. /***** blogroll section ******/
  255.  
  256. .panel_d img {
  257. width: 50px;
  258. height: 50px;
  259. border-radius: 10px;
  260. }
  261.  
  262. .panel_d img:hover {
  263. border-radius: 50%;
  264. -webkit-transform: rotate(360deg);transform: rotate(360deg)
  265. }
  266.  
  267. </style>
  268. </head>
  269.  
  270. <body>
  271.  
  272. <!--- return button --->
  273. <a class="back" href="/"><span class="th th-backward-arrow"></span>return</a>
  274.  
  275. <!--- radio inputs: don't touch --->
  276. <div id="container">
  277. <input hidden type="radio" name="carousel-control" id="button_a" checked/>
  278. <input hidden type="radio" name="carousel-control" id="button_b"/>
  279. <input hidden type="radio" name="carousel-control" id="button_c"/>
  280. {block:Following}<input hidden type="radio" name="carousel-control" id="button_d"/>{/block:Following}
  281.  
  282.  
  283. <!--- navigation starts ;
  284. find more icons at https://honeybee.suiomi.com/ --->
  285. <div id="navigation"><div class="line"></div>
  286.  
  287. <label for="button_a" class="label_a" title="about"> <span class="th th-users-o" aria-hidden="true"></span></label><!--- about button --->
  288.  
  289. <label for="button_b" class="label_b" title="faq"> <span class="th th-envelope-o" aria-hidden="true"></span> </label><!--- faq button --->
  290.  
  291. <label for="button_c" class="label_c" title="tags"> <span class="th th-bookmark-1-o" aria-hidden="true"></span> </label><!--- tags button --->
  292.  
  293. {block:Following}<label for="button_d" class="label_d" title="blogroll"> <span class="th th-app-o" aria-hidden="true"></span> </label>{/block:Following}<!--- blogroll button: this won't appear on sideblogs --->
  294.  
  295. </div>
  296. <!--- navigation ends --->
  297.  
  298.  
  299. <div id="carousel">
  300. <div class="p-wrapper">
  301. <!--- NOTE: search for 'about section', 'faq section', 'tags section'
  302. 'blogroll section' to edit the sections --->
  303.  
  304. <!--- about section starts --->
  305. <section class="panel_a">
  306.  
  307. <!--- icon + speechbuble --->
  308. <img class="icon" src="{PortraitURL-64}"></img><!--- replace {PortraitURL-64} with an image ulr if you don't want your icon there--->
  309. <div class="speech-bubble">
  310. <p>some text here. don't make it longer than one line.</p>
  311. </div>
  312.  
  313. <!--- text --->
  314. <p class="text">more text here. set accents wit <i>this</i></p>
  315.  
  316. <!--- progress bars: change 25% to the percentage you want --->
  317. <div class="progress">
  318. <h4>project</h4>
  319. <div class="bg"><span style="width: 25%"></span></div>
  320. </div>
  321. <!--- copy & paste as needed --->
  322.  
  323. </section>
  324. <!--- about section ends --->
  325.  
  326.  
  327. <!--- faq section starts --->
  328. <section class="panel_b">
  329.  
  330. <!--- question + answer template --->
  331. <p class="q">where can I get the code for this page?</p>
  332. <p class="a">you can get it here.</p>
  333. <!--- copy & paste as needed --->
  334.  
  335. <!--- ask box: don't edit --->
  336. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe>
  337.  
  338. </section>
  339. <!--- faq section ends --->
  340.  
  341.  
  342. <!--- tags section starts --->
  343. <section class="panel_c">
  344.  
  345. <!--- tag section template --->
  346. <h4>title</h4>
  347. <a href="/">tag</a> <a href="/">tag</a>
  348. <!--- copy & paste as needed --->
  349.  
  350. </section>
  351. <!--- tags section ends --->
  352.  
  353.  
  354. <!--- blogroll section starts
  355. you do not need to edit this
  356. this will not show up on sideblogs --->
  357. {block:Following}<section class="panel_d">
  358.  
  359. {block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src='{FollowedPortraitURL-64}' /></a>{block:Followed}
  360.  
  361. </section>{/block:Following}
  362. <!--- blogroll section ends --->
  363.  
  364. </div>
  365. </div>
  366.  
  367. <!----- DO NOT EDIT AFTER THIS POINT ---->
  368. </div>
  369. <div class="vt"><a href="https://venusthms.tumblr.com/" title="venusthms"><img src="https://i.imgur.com/PxFLRpM.png"></img></a></div>
  370.  
  371.  
  372. </body>
  373. </html>
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!