API tools faq
paste
clerihew

18. from the bullpen

clerihew
May 29th, 2019
1,066
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <!--
  4. © Clerihew Themes 2019
  5.  
  6. Do not use without reading terms of use.
  7.  
  8. Contact me at clerihew.tumblr.com if you have problems with any
  9. un-heavily edited code or if you have questions on how to use this theme.
  10. -->
  11.  
  12. <!-- title that shows in tab -->
  13. <title>from the bullpen</title>
  14. <link rel="shortcut icon" href="{Favicon}">
  15.  
  16. <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  17. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  18.  
  19. <style>
  20.  
  21. /* TUMBLR CONTROLS */
  22.  
  23. iframe.tmblr-iframe {
  24. z-index:99999999999999!important;
  25. top:0!important;
  26. right:0!important;
  27. opacity:0.6;
  28. /* delete invert(1) from here */
  29. filter:contrast(150%);
  30. -webkit-filter:contrast(150%);
  31. -o-filter:contrast(150%);
  32. -moz-filter:contrast(150%);
  33. /* to here if your blog has a dark background */
  34. transform:scale(0.65);
  35. transform-origin:100% 0;
  36. -webkit-transform:scale(0.65);
  37. -webkit-transform-origin:100% 0;
  38. -o-transform:scale(0.65);
  39. -o-transform-origin:100% 0;
  40. -moz-transform:scale(0.65);
  41. -moz-transform-origin:100% 0;
  42. -ms-transform:scale(0.65);
  43. -ms-transform-origin:100% 0;}
  44.  
  45. iframe.tmblr-iframe:hover {
  46. opacity:1!important;}
  47.  
  48. /* TOOLTIPS */
  49.  
  50. #s-m-t-tooltip{
  51. font-size:8px;
  52. color:#000;
  53. background-color:#fff;
  54. letter-spacing:2px;
  55. min-width:25px;
  56. max-width:200px;
  57. overflow:auto;
  58. text-transform:uppercase;
  59. font-style:italic;
  60. display: none;
  61. position: absolute;
  62. z-index: 999999999999;
  63. padding:5px;
  64. margin:30px 0 15px 10px;
  65. -webkit-transition: all 0.2s ease-in-out;
  66. -moz-transition: all 0.2s ease-in-out;
  67. transition: all 0.2s ease-in-out;}
  68.  
  69. /* SCROLLBAR */
  70.  
  71. /* thanks @shythemes */
  72. ::-webkit-scrollbar {
  73. width:17px;
  74. height:17px;
  75. }
  76.  
  77. ::-webkit-scrollbar {
  78. background-color: #fff; /* background color */
  79. }
  80.  
  81. ::-webkit-scrollbar-track {
  82. border:8px solid #fff; /* background color */
  83. background-color: #000; /* light border color */
  84. }
  85.  
  86. ::-webkit-scrollbar-thumb {
  87. border:8px solid #fff; /* background color */
  88. background-color: #bf0b0b; /* dark border color */
  89. min-height:24px;
  90. min-width:24px;
  91. }
  92.  
  93. /* font */
  94. body {
  95. /* upload an image to imgur and get the direct link to put into the url() */
  96. background: url(https://i.imgur.com/THjCFOq.png) no-repeat center center fixed;
  97. -webkit-background-size: cover;
  98. -moz-background-size: cover;
  99. -o-background-size: cover;
  100. background-size: cover;
  101. font-family: "Open Sans", sans-serif;
  102. }
  103.  
  104. /* main background color, text color */
  105. #main {
  106. margin-left: -315px;
  107. margin-top: 70px;
  108. margin-bottom: 73px;
  109. left: 50%;
  110. width: 630px;
  111. height: 500px;
  112. position: fixed;
  113. background-color: #fff;
  114. box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
  115. overflow-x:hidden;
  116. color: black;
  117. }
  118.  
  119. #main .nav {
  120. height: 80px;
  121. width: 600px;
  122. float: left;
  123. display: inline-block;
  124. margin-bottom: 10px;
  125. }
  126.  
  127. #main .nav h3 {
  128. margin-left: 22px;
  129. margin-bottom: 0;
  130. }
  131.  
  132. /* navigation links color, underline */
  133. #main .nav a {
  134. display: inline-block;
  135. margin-left: 20px;
  136. margin-top: 5px;
  137. font-size: 12px;
  138. color: black;
  139. text-decoration: underline #bf0b0b;
  140. -webkit-transition: color 0.5s;
  141. -moz-transition: color 0.5s;
  142. -o-transition: color 0.5s;
  143. transition: color 0.5s;
  144. }
  145.  
  146. /* nav links hover color */
  147. #main .nav a:hover {
  148. color: #bf0b0b;
  149. }
  150.  
  151. #main #bookshelf {
  152. margin-top: 80px;
  153. }
  154.  
  155. #main #comics {
  156. width: 150px;
  157. display: inline-block;
  158. vertical-align: top;
  159. }
  160.  
  161. #main #comics .comic-pic img {
  162. height: 200px;
  163. width: 125px;
  164. margin-left: 20px;
  165. margin-right: 20px;
  166. margin-bottom: 0;
  167. }
  168.  
  169. #main #comics .comic-text h5 {
  170. margin-left: 20px;
  171. margin-top: 3px;
  172. margin-bottom: 0;
  173. font-size: 12px;
  174. }
  175.  
  176. /* comic title link color, underline */
  177. #main #comics .comic-text a {
  178. color: black;
  179. text-decoration: underline #bf0b0b;
  180. -webkit-transition: color 0.5s;
  181. -moz-transition: color 0.5s;
  182. -o-transition: color 0.5s;
  183. transition: color 0.5s;
  184. }
  185.  
  186. /* comic title link hover */
  187. #main #comics .comic-text a:hover {
  188. color: #bf0b0b;
  189. }
  190.  
  191. #main #comics .comic-text p {
  192. margin-top: 4px;
  193. font-size: 10px;
  194. margin-left: 20px;
  195. }
  196.  
  197. /* DO NOT TOUCH THIS */
  198. .credit a {
  199. position: fixed;
  200. bottom: 15px;
  201. right: 15px;
  202. font-size: 8px;
  203. padding: 3px;
  204. text-decoration: none;
  205. background-color: white;
  206. color: black;
  207. -webkit-transition: color 1s;
  208. -moz-transition: color 1s;
  209. -o-transition: color 1s;
  210. transition: color 1s;
  211. }
  212.  
  213. .credit a:hover {
  214. color: #548773;
  215. }
  216.  
  217.  
  218. </style>
  219.  
  220.  
  221. </head>
  222. <body>
  223.  
  224. <div id="main">
  225.  
  226. <div class="nav">
  227. <h3>from the bullpen</h3>
  228. <i><a href="/">home</a>
  229. <a href="/ask">ask</a>
  230. <a href="/submit">submit</a></i>
  231. </div>
  232.  
  233. <div id="bookshelf">
  234.  
  235. <!-- to add more comics, copy everying from id="comics" to the last </div>. then, replace the info with your own. class="comic-pic" is the image you need to upload from imgur. use the direct link. class="comic-text" is the info below each image. replace the link with a link to the comic page. then, fill out a sentence or two of description. try to keep it short. -->
  236. <div id="comics">
  237. <div class="comic-pic">
  238. <img src="https://i.imgur.com/bqkkPfz.jpg"/>
  239. </div>
  240.  
  241. <div class="comic-text">
  242. <h5><a href="https://www.marvel.com/comics/series/22533/hawkeye_2016_-_2018">Hawkeye (2016)</a></h5>
  243. <p>Kate Bishop kicks ass. She also moves to LA and starts a private eye business.</p>
  244. </div>
  245. </div>
  246.  
  247. <div id="comics">
  248. <div class="comic-pic">
  249. <img src="https://i.imgur.com/XQfCZq5.jpg"/>
  250. </div>
  251.  
  252. <div class="comic-text">
  253. <h5><a href="https://www.marvel.com/comics/series/20615/ms_marvel_2015_-_present">Ms. Marvel (2015)</a></h5>
  254. <p>Kamala's now officially an Avenger. And wait, who's that with Bruno?</p>
  255. </div>
  256. </div>
  257.  
  258. <div id="comics">
  259. <div class="comic-pic">
  260. <img src="https://i.imgur.com/2RuNIw8.jpg"/>
  261. </div>
  262.  
  263. <div class="comic-text">
  264. <h5><a href="https://www.marvel.com/comics/series/22928/invincible_iron_man_2016_-_2018">Invincible Iron Man</a></h5>
  265. <p>Riri Williams is working hard as Ironheart while Tony Stark is missing. Wait, TONY STARK IS MISSING?</p>
  266. </div>
  267. </div>
  268.  
  269. <div id="comics">
  270. <div class="comic-pic">
  271. <img src="https://i.imgur.com/wd8fCDU.jpg"/>
  272. </div>
  273.  
  274. <div class="comic-text">
  275. <h5><a href="https://www.marvel.com/comics/series/23096/iceman_2017_-_2018">Ice Man (2017)</a></h5>
  276. <p>Bobby Drake has just found he's gay. From his alternate version teenage self who already has a boyfriend. Now what?</p>
  277. </div>
  278. </div>
  279.  
  280. <div id="comics">
  281. <div class="comic-pic">
  282. <img src="https://i.imgur.com/3gg0WK8.jpg"/>
  283. </div>
  284.  
  285. <div class="comic-text">
  286. <h5><a href="https://www.marvel.com/comics/series/21131/star_wars_poe_dameron_2016_-_present">Poe Dameron (2016)</a></h5>
  287. <p>POE DAMERON and BLACK SQUADRON tackle the mysteries of the universe in this amazing expansion on Poe's character.</p>
  288. </div>
  289. </div>
  290.  
  291. <div id="comics">
  292. <div class="comic-pic">
  293. <img src="https://i.imgur.com/IM6QPZa.jpg"/>
  294. </div>
  295.  
  296. <div class="comic-text">
  297. <h5><a href="https://imagecomics.com/comics/releases/snotgirl-1">Snotgirl</a></h5>
  298. <p>When Cool Girl suddenly waltzes into Lottie Person's life and fills it with lust and terror, her fashion-blogger life takes a mysterious turn.</p>
  299. </div>
  300. </div>
  301.  
  302. <div id="comics">
  303. <div class="comic-pic">
  304. <img src="https://i.imgur.com/xTar060.jpg"/>
  305. </div>
  306.  
  307. <div class="comic-text">
  308. <h5><a href="https://www.marvel.com/comics/collection/48124/fantastic_four_by_jonathan_hickman_omnibus_hardcover">Hickman's FF</a></h5>
  309. <p>The best Fantastic Four story ever written. Hickman returns the Four to their roots as adventurers, rescuers, and innovators.</p>
  310. </div>
  311. </div>
  312.  
  313. <div id="comics">
  314. <div class="comic-pic">
  315. <img src="https://i.imgur.com/FOjwdzV.jpg"/>
  316. </div>
  317.  
  318. <div class="comic-text">
  319. <h5><a href="https://imagecomics.com/comics/series/deadly-class">Deadly Class</a></h5>
  320. <p>Kings Dominion is the deadliest school on the planet. Orphan and wanted criminal Marcus Lopez has just been accepted. High school is about to get a lot more cutthroat.</p>
  321. </div>
  322. </div>
  323.  
  324.  
  325. </div> <!-- bookshelf -->
  326. </div> <!-- main -->
  327.  
  328. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  329. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  330. <script>
  331. (function($){
  332. $(document).ready(function(){
  333. $("[title]").style_my_tooltips({
  334. tip_follows_cursor:true,
  335. tip_delay_time:0,
  336. tip_fade_speed:0
  337. }
  338. );
  339. });
  340. })(jQuery);
  341. </script>
  342.  
  343.  
  344. <!-- DO NOT TOUCH THIS -->
  345. <div class="credit">
  346. <a href="https://clerihew.tumblr.com/" title="theme by clerihew"><span class="th th-aloe-vera"></span></a>
  347. </div>
  348.  
  349. </body>
  350. </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!