API tools faq
paste
pegasusthemes

page 12 // polaris

pegasusthemes
Dec 1st, 2018
1,644
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.33 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 by @themehive
  16. find more icons at https://honeybee.themehive.co/
  17.  
  18. - hover effect: https://ianlunn.github.io/Hover/
  19.  
  20. ---------------------------------------------------------------------->
  21.  
  22. <title>advent calendar</title><link rel="shortcut icon" href="{Favicon}"> <!-- change (tab) title here -->
  23.  
  24. <!---- SCRIPT - DO NOT TOUCH ---->
  25. <meta name="viewport" content="width=device-width, initial-scale=1">
  26. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//dl.dropbox.com/s/fpgzqeh5y3y2smi/script.js"></script><link href="https://fonts.googleapis.com/css?family=Karla|La+Belle+Aurore|Lora:400,700i|Playfair+Display|Sacramento" rel="stylesheet">
  27.  
  28. <link href="https://static.tumblr.com/4gatuv1/X8Poxwvz8/style-my-tooltips.css" rel="stylesheet" type="text/css" /><script src="https://static.tumblr.com/4gatuv1/Aneoxwvz8/jquery.style-my-tooltips.js"></script>
  29. <script>
  30. !function(t){t(document).ready(function(){t("a[title]").style_my_tooltips({tip_follows_cursor:!0,tip_delay_time:200,tip_fade_speed:300})})}(jQuery);
  31. </script>
  32. </script>
  33.  
  34.  
  35. <style type="text/css">
  36.  
  37. /* tooltips */
  38.  
  39. #s-m-t-tooltip {
  40. max-width: 250px;
  41. margin:24px 14px 7px 12px;
  42. padding:1px 5px;
  43. border-radius:2px;
  44. font-family: 'karla';
  45. letter-spacing: 1px;
  46. font-size:11px;
  47. color:#fff;
  48. box-shadow: none;
  49. }
  50.  
  51. /* scrollbar */
  52.  
  53. ::-webkit-scrollbar{
  54. height:11px;
  55. width:2px;
  56. background:inherit;
  57. }
  58. ::-webkit-scrollbar-track {
  59. background-color: #fdc0c0;
  60. }
  61. ::-webkit-scrollbar-thumb {
  62. background-color: #fff;
  63. min-height:24px;
  64. min-width:24px;
  65. }
  66.  
  67. /* selection */
  68.  
  69. ::-moz-selection { background:#eee;color:#000; }
  70. ::selection { background:#eee;color:#000; }
  71.  
  72. /* tumblr controls */
  73.  
  74. iframe.tmblr-iframe {
  75. z-index:99999999999999!important;
  76. top:0!important;
  77. right:0!important;
  78. opacity:0.4;
  79. /* delete invert(1) from here */
  80. filter:invert(1) contrast(150%);
  81. -webkit-filter:invert(1) contrast(150%);
  82. -o-filter:invert(1) contrast(150%);
  83. -moz-filter:invert(1) contrast(150%);
  84. -ms-filter:invert(1) contrast(150%);
  85. /* to here if your blog has a dark background */
  86. transform:scale(0.65);
  87. transform-origin:100% 0;
  88. -webkit-transform:scale(0.65);
  89. -webkit-transform-origin:100% 0;
  90. -o-transform:scale(0.65);
  91. -o-transform-origin:100% 0;
  92. -moz-transform:scale(0.65);
  93. -moz-transform-origin:100% 0;
  94. -ms-transform:scale(0.65);
  95. -ms-transform-origin:100% 0;}
  96.  
  97. iframe.tmblr-iframe:hover {
  98. opacity:0.6!important;}
  99.  
  100. /* general */
  101.  
  102. body {
  103. cursor: default;
  104. overflow-x: hidden;
  105. font-family: 'karla';
  106. font-size: 13px; /*this will change all fonts sizes*/
  107. background: #fff;
  108. }
  109.  
  110. /* accent color one*/
  111.  
  112. .nav h1, .nav a {
  113. color: #B1DCB5;
  114. }
  115.  
  116. .date, .desc {
  117. background: #B1DCB5;
  118. }
  119.  
  120. /* accent color two*/
  121.  
  122. .overlay, .nav a:after, #s-m-t-tooltip {
  123. background: #F9B8B8;
  124. }
  125.  
  126. .nav a:hover {
  127. color: #F9B8B8;
  128.  
  129. }
  130.  
  131. /* navigation */
  132.  
  133. .nav {
  134. width: 850px; /*keep the same as .calendar*/
  135. height: 100px;
  136. padding: 0 5px 0 60px;
  137. }
  138.  
  139. .nav h1 { /*title*/
  140. font-family: 'Lora', serif;
  141. font-size: 1.8rem;
  142. font-weight: 700;
  143. font-style: italic;
  144. }
  145.  
  146. .nav a { /*navigation links*/
  147. margin-right: 5px;
  148. }
  149.  
  150. .nav a:after {/*link hover effect*/
  151. content: "";
  152. bottom: -1px;
  153. height: 1px;
  154. width: 1px;
  155. visibility: hidden;
  156. transition: all 0.3s ease-in-out 0s;
  157. left: 0;
  158. transform: scaleX(0);
  159. width: 100%;
  160. position:absolute;
  161. }
  162.  
  163. .nav a:hover:after {width: 100%;visibility: visible;transform: scaleX(1);}
  164.  
  165. /* calendar */
  166.  
  167. .calendar {
  168. width: 850px; /*keep the same as .nav*/
  169. height: 500px;
  170. padding: 10px 5px 0 60px;
  171. color: #fff;
  172. }
  173.  
  174. /* dates */
  175.  
  176. .date { /*squares*/
  177. width: 100px;
  178. height: 100px;
  179. margin: 0 10px 10px 0;
  180. text-align: center;
  181. }
  182.  
  183. .overlay span { /*numbers*/
  184. top: 25%;
  185. font-family: 'Lora', serif;
  186. font-size: 2rem;
  187. font-weight: 700;
  188. font-style: italic;
  189. }
  190.  
  191. .content .th {/*icons*/
  192. top: 30%;
  193. font-size: 2rem;
  194. }
  195.  
  196. /* delete this if you don't want the hover effect on the dates*/
  197. .date {
  198. display: inline-block;
  199. -webkit-transform: perspective(1px) translateZ(0);
  200. transform: perspective(1px) translateZ(0);
  201. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  202. -webkit-transition-duration: 0.3s;
  203. transition-duration: 0.3s;
  204. -webkit-transition-property: transform;
  205. transition-property: transform;
  206. }
  207. .date:hover, .date:focus, .date:active { -webkit-transform: scale(1.1);transform: scale(1.1);}
  208. /*until here*/
  209.  
  210. /* description*/
  211.  
  212. .desc {
  213. width: 330px;
  214. height: 100px;
  215. }
  216.  
  217. .desc a {
  218. text-decoration: underline;
  219. }
  220.  
  221. /* other links */
  222.  
  223. a {
  224. color: #fff;
  225. text-decoration: none;
  226. cursor: help;
  227. }
  228.  
  229. a .th:hover, .desc a:hover { /*hover color*/
  230. color: #f6f6f6;
  231. }
  232.  
  233.  
  234. </style><link rel="stylesheet" type="text/css" href="//dl.dropbox.com/s/e9xyppp2mvcjsn5/style.css">
  235. </head>
  236.  
  237. <body>
  238.  
  239. <!--- navigation --->
  240. <div class="nav">
  241. <h1>advent calendar</h1> <!--- title --->
  242. <a href="/">home</a>
  243. <a href="/ask">contact</a>
  244. <a href="/">link</a>
  245. <a href="/">link</a>
  246. </div>
  247.  
  248.  
  249. <!--- calendar --->
  250. <!--- layout:
  251.  
  252. without text content:
  253. <div class="date">
  254. <div class="content">content here</div>
  255. <div class="overlay" data-date="xxxx-yy-zz"><span>number here</span></div>
  256. </div>
  257.  
  258. with an icon as a link:
  259.  
  260. <div class="date">
  261. <div class="content"><a href="URL" title="link title"><span class="th th-gift"></span></a></div>
  262. <div class="overlay" data-date="xxxx-yy-zz"><span>number here</span></div>
  263. </div>
  264.  
  265. & replace xxxx-yy-zz with a date (format: year-month-day)
  266. & you can find more icons here https://honeybee.themehive.co/
  267. --->
  268. <div class="calendar">
  269.  
  270. <div class="date">
  271. <div class="content">content here</div>
  272. <div class="overlay" data-date="2018-12-01"><span>1</span></div>
  273. </div>
  274.  
  275. <div class="date">
  276. <div class="content">content here</div>
  277. <div class="overlay" data-date="2018-12-02"><span>2</span></div>
  278. </div>
  279.  
  280. <div class="date">
  281. <div class="content">content here</div>
  282. <div class="overlay" data-date="2018-12-03"><span>3</span></div>
  283. </div>
  284.  
  285. <div class="date">
  286. <div class="content">content here</div>
  287. <div class="overlay" data-date="2018-12-04"><span>4</span></div>
  288. </div>
  289.  
  290. <div class="date">
  291. <div class="content">content here</div>
  292. <div class="overlay" data-date="2018-12-05"><span>5</span></div>
  293. </div>
  294.  
  295. <div class="date">
  296. <div class="content">content here</div>
  297. <div class="overlay" data-date="2018-12-06"><span>6</span></div>
  298. </div>
  299.  
  300. <div class="date">
  301. <div class="content">content here</div>
  302. <div class="overlay" data-date="2018-12-07"><span>7</span></div>
  303. </div>
  304.  
  305. <div class="date">
  306. <div class="content">content here</div>
  307. <div class="overlay" data-date="2018-12-08"><span>8</span></div>
  308. </div>
  309.  
  310. <div class="date">
  311. <div class="content">content here</div>
  312. <div class="overlay" data-date="2018-12-09"><span>9</span></div>
  313. </div>
  314.  
  315. <div class="date">
  316. <div class="content">content here</div>
  317. <div class="overlay" data-date="2018-12-10"><span>10</span></div>
  318. </div>
  319.  
  320. <div class="date">
  321. <div class="content">content here</div>
  322. <div class="overlay" data-date="2018-12-11"><span>11</span></div>
  323. </div>
  324.  
  325. <div class="date">
  326. <div class="content">content here</div>
  327. <div class="overlay" data-date="2018-12-12"><span>12</span></div>
  328. </div>
  329.  
  330. <div class="date">
  331. <div class="content">content here</div>
  332. <div class="overlay" data-date="2018-12-13"><span>13</span></div>
  333. </div>
  334.  
  335. <div class="date">
  336. <div class="content">content here</div>
  337. <div class="overlay" data-date="2018-12-14"><span>14</span></div>
  338. </div>
  339.  
  340. <div class="date">
  341. <div class="content">content here</div>
  342. <div class="overlay" data-date="2018-12-15"><span>15</span></div>
  343. </div>
  344.  
  345. <div class="date">
  346. <div class="content">content here</div>
  347. <div class="overlay" data-date="2018-12-16"><span>16</span></div>
  348. </div>
  349.  
  350. <div class="date">
  351. <div class="content">content here</div>
  352. <div class="overlay" data-date="2018-12-17"><span>17</span></div>
  353. </div>
  354.  
  355. <div class="date">
  356. <div class="content">content here</div>
  357. <div class="overlay" data-date="2018-12-18"><span>18</span></div>
  358. </div>
  359.  
  360. <div class="date">
  361. <div class="content">content here</div>
  362. <div class="overlay" data-date="2018-12-19"><span>19</span></div>
  363. </div>
  364.  
  365. <div class="date">
  366. <div class="content">content here</div>
  367. <div class="overlay" data-date="2018-12-20"><span>20</span></div>
  368. </div>
  369.  
  370. <div class="date">
  371. <div class="content">content here</div>
  372. <div class="overlay" data-date="2018-12-21"><span>21</span></div>
  373. </div>
  374.  
  375. <div class="date">
  376. <div class="content">content here</div>
  377. <div class="overlay" data-date="2018-12-22"><span>22</span></div>
  378. </div>
  379.  
  380. <div class="date">
  381. <div class="content">content here</div>
  382. <div class="overlay" data-date="2018-12-23"><span>23</span></div>
  383. </div>
  384.  
  385. <div class="date">
  386. <div class="content">content here</div>
  387. <div class="overlay" data-date="2018-12-24"><span>24</span></div>
  388. </div>
  389.  
  390. <div class="date">
  391. <div class="content">content here</div>
  392. <div class="overlay" data-date="2018-12-25"><span>25</span></div>
  393. </div>
  394.  
  395. <!--- description --->
  396. <div class="desc"><div class="dcontent">
  397.  
  398. here goes your description. <i>italic</i>, <b>bold</b>, <a href="/">link</a>
  399.  
  400. </div></div>
  401.  
  402. <!----- DO NOT EDIT AFTER THIS LINE ---->
  403. </div>
  404. <div class="vt"><a href="https://venusthms.tumblr.com/" title="venusthms"><img src="https://i.imgur.com/PxFLRpM.png"></img></a></div>
  405. </body>
  406. </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!