API tools faq
paste
odeysseus_thm

birthdays / APRICOT (v2)

odeysseus_thm
Apr 21st, 2017
2,515
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5. apricot v2
  6.  
  7. @odeysseus
  8.  
  9. - you can choose colors using colorpicker.com
  10. -->
  11.  
  12.  
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15.  
  16. <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"><div style="bottom:20px;right:20px;position:fixed"><a href="http://odeysseus.tumblr.com">O</a></div>
  17.  
  18. <title>birthdays</title> <!--title-->
  19.  
  20.  
  21. <style type="text/css">
  22.  
  23. #s-m-t-tooltip{
  24. position:absolute;
  25. margin:15px;
  26. max-width:250px;
  27. z-index:999999999999999;
  28. padding:5px;
  29. font-size:10px;
  30. border-radius:2px;
  31. font-family:'open sans';
  32. background:#fff;
  33. border:1px dotted #eee;
  34. color:#777;
  35. }
  36.  
  37. body {
  38. background:#fcfcfc; /* background */
  39. color:#767676; /* body text */
  40. font-family:'Georgia', sans-serif;
  41. font-size:10px;
  42. -moz-osx-font-smoothing:grayscale;
  43. -webkit-font-smoothing:antialiased;
  44. font-smoothing:antialiased;
  45. }
  46.  
  47.  
  48. a {
  49. color:#aaa; /* links */
  50. text-decoration:none;
  51. transition:all .4s ease;
  52. -webkit-transition:all .4s ease;
  53. -moz-transition:all .4s ease;
  54. -o-transition:all .4s ease;
  55. }
  56.  
  57. a:hover { text-decoration:none;
  58. color:#555; /* links on hover */
  59. }
  60.  
  61. section {
  62. margin:130px auto 50px;
  63. width:calc(242px * 3); /* 3 can be changed depending on how many columns you want */
  64. }
  65.  
  66. .box {
  67. width:180px;
  68. margin:20px;
  69. padding:10px;
  70. padding-bottom:5px;
  71. background:#fff; /* box background */
  72. border:1px solid #eee; /* box border */
  73. border-radius:2px;
  74. }
  75. .link a { display:inline-block;width:48%;font-family:'Open Sans';text-align:center;height:30px; }
  76.  
  77. .link b {
  78. border:1px dotted transparent;padding:4px 5px;
  79. font-weight:normal;
  80. border-radius:2px;vertical-align:middle;
  81. color:#777;margin-right:5px;
  82. }
  83.  
  84. .title {
  85. font-size:11px;
  86. margin-bottom:15px;font-style:italic;
  87. color:#555; /* color of bday box titles */
  88. text-align:center;
  89. border-bottom:1px solid #eee;
  90. padding-bottom:10px;
  91. }
  92. /* bday colors */
  93. .jan b { background:#e2f8fd; }
  94. .feb b { background:#fbeff5; }
  95. .mar b { background:#fbefc5; }
  96. .apr b { background:#defbc5; }
  97. .may b { background:#c4e3f4; }
  98. .jun b { background:#c4f4ec; }
  99. .jul b { background:#fdceff; }
  100. .aug b { background:#f2e1ff; }
  101. .sep b { background:#f5e7d4; }
  102. .oct b { background:#ffe1c7; }
  103. .nov b { background:#dddef1; }
  104. .dec b { background:#fdc8c8; }
  105.  
  106. header {
  107. top:0px;left:0px;width:100%;position:fixed;text-align:center;z-index:1;padding:30px 0px 20px;
  108. background:#fff; /* header background */
  109. border-bottom:1px solid #eee; /* header bottom border */
  110. font-family:'open sans';font-size:10px;
  111. }
  112. header a { font-style:normal; }
  113. header b {
  114. font-size:12px;
  115. font-weight:400;
  116. color:#444; /* main heading color */
  117. font-style:italic;
  118. font-family:georgia;
  119. padding:5px;
  120. background:#fafafa; /* main heading bg */
  121. margin:5px;
  122. border:1px solid #eee; /* main heading border */
  123. border-radius:2px;
  124. }
  125. header a {
  126. padding:5px;
  127. background:#fafafa; /* header link bg */
  128. margin:5px;
  129. color:#666; /* header link color */
  130. border:1px dotted transparent;
  131. border-radius:2px;
  132. }
  133. header a:hover {
  134. border:1px dotted #eee; /* header link border on hover */
  135. background:#fff; /* header link bg on hover */
  136.  
  137. }
  138.  
  139. </style>
  140.  
  141. </head>
  142.  
  143. <body>
  144. <!-- header -->
  145. <header>
  146. <b>birthday page</b> <!--main title-->
  147. <!--links: add or delete as you want-->
  148. <a href="/">home</a>
  149. <a href="http://tumblr.com/dashboard">dash</a>
  150. <a href="link to join post">join</a>
  151.  
  152. <br><br> be sure to wish these sunshines happy birthday!
  153. <!--delete the above line if you only want a title n links in the header-->
  154. </header>
  155. <!--end header-->
  156.  
  157. <section>
  158. <!--start bdays-->
  159.  
  160. <div class="box jan">
  161.  
  162. <div class="title">january</div>
  163. <div class="link jan">
  164. <!--copy and paste the following for bdays: <a href="blog url"><b>date</b> name </a> -->
  165.  
  166. <a href="blog url" ><b>00</b> name</a>
  167. <a href="blog url" ><b>00</b> name</a>
  168. </div>
  169. </div>
  170.  
  171.  
  172.  
  173. <div class="box feb">
  174.  
  175. <div class="title">february</div>
  176. <div class="link feb">
  177.  
  178. <a href="blog url" ><b>00</b> name</a>
  179. <a href="blog url" ><b>00</b> name</a>
  180.  
  181. </div>
  182. </div>
  183.  
  184.  
  185.  
  186. <div class="box mar">
  187.  
  188. <div class="title">march</div>
  189. <div class="link mar">
  190.  
  191. <a href="blog url" ><b>00</b> name</a>
  192. <a href="blog url" ><b>00</b> name</a>
  193. </div>
  194. </div>
  195.  
  196. <div class="box apr">
  197. <div class="title">april</div>
  198. <div class="link apr">
  199.  
  200. <a href="blog url" ><b>00</b> name</a>
  201. <a href="blog url" ><b>00</b> name</a>
  202.  
  203. </div>
  204. </div>
  205. <div class="box may">
  206. <div class="title">may</div>
  207. <div class="link may">
  208.  
  209. <a href="blog url" ><b>00</b> name</a>
  210. <a href="blog url" ><b>00</b> name</a>
  211. </div>
  212. </div>
  213.  
  214. <div class="box jun">
  215. <div class="title">june</div>
  216. <div class="link jun">
  217.  
  218. <a href="blog url" ><b>00</b> name</a>
  219. <a href="blog url" ><b>00</b> name</a>
  220. </div>
  221. </div>
  222.  
  223. <div class="box jul">
  224. <div class="title">july</div>
  225. <div class="link jul">
  226.  
  227. <a href="blog url" ><b>00</b> name</a>
  228. <a href="blog url" ><b>00</b> name</a>
  229. </div>
  230. </div>
  231.  
  232. <div class="box aug">
  233. <div class="title">august</div>
  234. <div class="link aug">
  235.  
  236. <a href="blog url" ><b>00</b> name</a>
  237. <a href="blog url" ><b>00</b> name</a>
  238. </div>
  239. </div>
  240.  
  241. <div class="box sep">
  242. <div class="title">september</div>
  243. <div class="link sep">
  244.  
  245. <a href="blog url" ><b>00</b> name</a>
  246. <a href="blog url" ><b>00</b> name</a>
  247. </div>
  248. </div>
  249.  
  250. <div class="box oct">
  251. <div class="title">october</div>
  252. <div class="link oct">
  253.  
  254. <a href="blog url" ><b>00</b> name</a>
  255. <a href="blog url" ><b>00</b> name</a>
  256. </div>
  257. </div>
  258.  
  259. <div class="box nov">
  260. <div class="title">november</div>
  261. <div class="link nov">
  262.  
  263. <a href="blog url" ><b>00</b> name</a>
  264. <a href="blog url" ><b>00</b> name</a>
  265. </div>
  266. </div>
  267.  
  268. <div class="box dec">
  269. <div class="title">december</div>
  270. <div class="link dec">
  271.  
  272. <a href="blog url" ><b>00</b> name</a>
  273. <a href="blog url" ><b>00</b> name</a>
  274. </div>
  275. </div>
  276.  
  277. <!--end bdays-->
  278. </section>
  279.  
  280. <!--scripts-->
  281. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  282. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  283.  
  284. <script>
  285. (function($){
  286. $(document).ready(function(){
  287. $("a[title]").style_my_tooltips({
  288. tip_follows_cursor:true,
  289. tip_delay_time:30,
  290. tip_fade_speed:300,
  291. attribute:"title"
  292. });
  293. });
  294. })(jQuery);
  295. </script>
  296.  
  297. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  298. <script type="text/javascript">
  299. $(window).load(function () {
  300. $('section').masonry({
  301. itemSelector : ".box",
  302. },
  303. function() { $('section').masonry({ appendedContent: $(this) }); }
  304. );
  305. });
  306. </script>
  307.  
  308. </body>
  309.  
  310.  
  311.  
  312. </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!