API tools faq
paste
clerihew

16. take a walk with me

clerihew
Mar 31st, 2019
1,371
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.69 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. <link rel="shortcut icon" href="{Favicon}"/>
  13. <title>{Title}</title>
  14. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
  15. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  16.  
  17. <style>
  18.  
  19. /* page background, font, text color */
  20. body {
  21. background-color: #e2e2e2;
  22. font-family: "Source Sans Pro", sans-serif;
  23. color: #444;
  24. }
  25.  
  26. /* tooltips */
  27. #s-m-t-tooltip {
  28. font-size:8px;
  29. color:#000;
  30. background-color:#fff;
  31. letter-spacing:2px;
  32. min-width:50px;
  33. max-width:200px;
  34. overflow:auto;
  35. text-transform:uppercase;
  36. font-style:italic;
  37. display: none;
  38. position: absolute;
  39. z-index: 999999999999;
  40. padding:5px;
  41. margin:30px 0 15px 10px;
  42. -webkit-transition: all 0.2s ease-in-out;
  43. -moz-transition: all 0.2s ease-in-out;
  44. transition: all 0.2s ease-in-out;
  45. }
  46.  
  47. .sidebar {
  48. max-width: 250px;
  49. height: auto;
  50. position: fixed;
  51. top: 25%;
  52. left: 15%;
  53. }
  54.  
  55. /* icon border */
  56. .sidebar img {
  57. margin-bottom: 0px;
  58. border: 2px solid #444;
  59. border-radius: 100px;
  60. }
  61.  
  62. .sidebar h3 {
  63. margin-top: 5px;
  64. margin-bottom: 0px;
  65. }
  66.  
  67. /* sidebar links background */
  68. .sidebar .links {
  69. background-color: #ccc;
  70. padding: 5px;
  71. margin-top: 5px;
  72. border-radius: 10px;
  73. }
  74.  
  75. /* sidebar links color, underline color */
  76. .sidebar a:link, a:visited {
  77. display: inline-block;
  78. font-size: 12px;
  79. margin: 5px;
  80. color: #444;
  81. text-decoration: underline #109add;
  82. -moz-transition: color 1s;
  83. -o-transition: color 1s;
  84. -webkit-tranition: color 1s;
  85. transition: color 1s;
  86. }
  87.  
  88. /* sidebar links hover */
  89. .sidebar a:hover {
  90. color: #109add;
  91. }
  92.  
  93. .main {
  94. margin: 100px 100px 100px 35%;
  95. column-count: 2;
  96. column-gap: -40px;
  97. }
  98.  
  99. .main .flip-card {
  100. display: inline-block;
  101. padding-bottom: 50px;
  102. padding-left: 50px;
  103. padding-right: 50px;
  104. background-color: transparent;
  105. width: 250px;
  106. height: 250px;
  107. perspective: 1000px;
  108. }
  109.  
  110. .main .flip-card-inner {
  111. position: relative;
  112. width: 100%;
  113. height: 100%;
  114. text-align: center;
  115. transition: transform 1s;
  116. transform-style: preserve-3d;
  117. }
  118.  
  119. .main .flip-card:hover .flip-card-inner {
  120. transform: rotateY(180deg);
  121. }
  122.  
  123. .main .flip-card-front, .flip-card-back {
  124. position: absolute;
  125. width: 100%;
  126. height: 100%;
  127. backface-visibility: hidden;
  128. }
  129.  
  130. /* front background color, border, text color */
  131. .main .flip-card-front {
  132. text-align: center;
  133. background-color: #e2e2e2;
  134. color: #444;
  135. border: 1px solid #000;
  136. border-radius: 10px;
  137. }
  138.  
  139. .main .flip-card-front h3 {
  140. position: relative;
  141. margin-top: 50%;
  142. top: -20px;
  143. font-size: 40px;
  144. }
  145.  
  146. /* back background color */
  147. .main .flip-card-back {
  148. border-radius: 10px;
  149. background-color: #e2e2e2;
  150. border: 1px solid #444;
  151. transform: rotateY(180deg);
  152. }
  153.  
  154. /* back link color, font size */
  155. .main .flip-card-back a {
  156. font-size: 12px;
  157. width: 90px;
  158. display: inline-block;
  159. margin: 15px 15px;
  160. color: #444;
  161. text-decoration: underline #109add;
  162. -moz-transition: color 1s;
  163. -o-transition: color 1s;
  164. -webkit-tranition: color 1s;
  165. transition: color 1s;
  166. }
  167.  
  168. /* back link hover color */
  169. .main .flip-card-back a:hover {
  170. color: #109add;
  171. text-decoration: underline #109add;
  172. }
  173.  
  174. /* DO NOT TOUCH THIS */
  175. .credit a {
  176. position: fixed;
  177. bottom: 15px;
  178. right: 15px;
  179. font-size: 8px;
  180. padding: 3px;
  181. text-decoration: none;
  182. color: black;
  183. -webkit-transition: color 1s;
  184. -moz-transition: color 1s;
  185. -o-transition: color 1s;
  186. transition: color 1s;
  187. }
  188.  
  189. .credit a:hover {
  190. color: #548773;
  191. }
  192.  
  193. /* thanks @shythemes */
  194. ::-webkit-scrollbar {
  195. width: 17px;
  196. height: 17px;
  197. }
  198.  
  199. /* scrollbar background */
  200. ::-webkit-scrollbar {
  201. background-color: #e2e2e2;
  202. }
  203.  
  204. ::-webkit-scrollbar-track {
  205. border: 8px solid #e2e2e2; /* background color */
  206. background-color: #fff; /* light border color */
  207. }
  208.  
  209. ::-webkit-scrollbar-thumb {
  210. border: 8px solid #e2e2e2; /* background color */
  211. background-color: #444; /* dark border color */
  212. min-height:24px;
  213. min-width:24px;
  214. }
  215.  
  216. /* creds to @cyantists */
  217. iframe.tmblr-iframe {
  218. z-index:99999999999999!important;
  219. top:0!important;
  220. right:0!important;
  221. opacity:0.6;
  222. /* delete invert(1) from here */
  223. filter:invert(1) contrast(150%);
  224. -webkit-filter:invert(1) contrast(150%);
  225. -o-filter:invert(1) contrast(150%);
  226. -moz-filter:invert(1) contrast(150%);
  227. -ms-filter:invert(1) contrast(150%);
  228. /* to here if your blog has a dark background */
  229. transform:scale(0.65);
  230. transform-origin:100% 0;
  231. -webkit-transform:scale(0.65);
  232. -webkit-transform-origin:100% 0;
  233. -o-transform:scale(0.65);
  234. -o-transform-origin:100% 0;
  235. -moz-transform:scale(0.65);
  236. -moz-transform-origin:100% 0;
  237. -ms-transform:scale(0.65);
  238. -ms-transform-origin:100% 0;}
  239.  
  240. iframe.tmblr-iframe:hover {
  241. opacity:0.8!important;}
  242.  
  243. </style>
  244.  
  245. </head>
  246. <body>
  247.  
  248. <div class="sidebar">
  249. <img src="{PortraitURL-64}">
  250. <h3><i>{Title}</i></h3>
  251. <div class="links">
  252. <div align="center">
  253. <a href="/">home</a>
  254. <a href="/ask">ask</a>
  255. <a href="/submit">submit</a>
  256. </div>
  257. </div>
  258. </div>
  259.  
  260. <div class="main">
  261. <!-- flip card 1 -->
  262. <div class="flip-card">
  263. <div class="flip-card-inner">
  264. <div class="flip-card-front">
  265. <h3>Movies</h3>
  266. </div>
  267. <div class="flip-card-back">
  268. <!-- this is a tag. put the tag behind the "/" and it will take the user to that page. a hyphen must be used for all tags with spaces. for example, putting "/tagged/star-wars" will redirect a user to a page with all of your posts that are tagged star wars. copy and paste to add a new section. (try not to add a lot of tags, otherwise it will spill out of the body) -->
  269. <a href="/">aquaman</a>
  270. <a href="/">the hateful eight</a>
  271. <a href="/">lady bird</a>
  272. <a href="/">fantastic four</a>
  273. <a href="/">the omen</a>
  274. <a href="/">pan's labyrinth</a>
  275. <a href="/">bruno and boots</a>
  276. <a href="/">the godfather</a>
  277. <a href="/">star wars</a>
  278. <a href="/">indiana jones</a>
  279. </div>
  280. </div>
  281. </div>
  282.  
  283. <!-- flip card 2-->
  284. <div class="flip-card">
  285. <div class="flip-card-inner">
  286. <div class="flip-card-front">
  287. <h3>Video Games</h3>
  288. </div>
  289. <div class="flip-card-back">
  290. <a href="/">legend of zelda</a>
  291. <a href="/">mario odyssey</a>
  292. <a href="/">odyssey</a>
  293. <a href="/">red dead redemption</a>
  294. <a href="/">wolfenstein</a>
  295. <a href="/">overwatch</a>
  296. <a href="/">undertale</a>
  297. <a href="/">hitman</a>
  298. <a href="/">gta v</a>
  299. <a href="/">spiderman ps4</a>
  300. </div>
  301. </div>
  302. </div>
  303.  
  304. <!-- flip card 3 -->
  305. <div class="flip-card">
  306. <div class="flip-card-inner">
  307. <div class="flip-card-front">
  308. <h3>Comics</h3>
  309. </div>
  310. <div class="flip-card-back">
  311. <a href="/">x-23</a>
  312. <a href="/">fantastic four</a>
  313. <a href="/">superior spider-man arc</a>
  314. <a href="/">miles morales</a>
  315. <a href="/">ms. marvel</a>
  316. <a href="/">lockjaw</a>
  317. <a href="/">snotgirl</a>
  318. <a href="/">heavy vinyl</a>
  319. <a href="/">return of superman</a>
  320. <a href="/">spider-man/black cat</a>
  321. </div>
  322. </div>
  323. </div>
  324.  
  325. <!-- flip card 4 -->
  326. <div class="flip-card">
  327. <div class="flip-card-inner">
  328. <div class="flip-card-front">
  329. <h3>Travel</h3>
  330. </div>
  331. <div class="flip-card-back">
  332. <a href="/">los angeles</a>
  333. <a href="/">new york</a>
  334. <a href="/">toronto</a>
  335. <a href="/">mexico city</a>
  336. <a href="/">madrid</a>
  337. <a href="/">athens</a>
  338. <a href="/">phuket</a>
  339. <a href="/">sydney</a>
  340. <a href="/">london</a>
  341. <a href="/">rome</a>
  342. </div>
  343. </div>
  344. </div>
  345.  
  346. <!-- flip card 5 -->
  347. <div class="flip-card">
  348. <div class="flip-card-inner">
  349. <div class="flip-card-front">
  350. <h3>Music</h3>
  351. </div>
  352. <div class="flip-card-back">
  353. <a href="/">5sos</a>
  354. <a href="/">hozier</a>
  355. <a href="/">peach pit</a>
  356. <a href="/">boy pablo</a>
  357. <a href="/">one direction</a>
  358. <a href="/">harry styles</a>
  359. <a href="/">peachy!</a>
  360. <a href="/">cuco</a>
  361. <a href="/">lany</a>
  362. <a href="/">taylor swift</a>
  363. </div>
  364. </div>
  365. </div>
  366.  
  367. <!-- flip card 6 -->
  368. <div class="flip-card">
  369. <div class="flip-card-inner">
  370. <div class="flip-card-front">
  371. <h3>Misc</h3>
  372. </div>
  373. <div class="flip-card-back">
  374. <a href="/">dnd</a>
  375. <a href="/">figure skating</a>
  376. <a href="/">me</a>
  377. <a href="/">food</a>
  378. <a href="/">wishlist</a>
  379. <a href="/">fashion</a>
  380. <a href="/">words</a>
  381. <a href="/">art</a>
  382. <a href="/">literature</a>
  383. </div>
  384. </div>
  385. </div>
  386.  
  387. <!-- copy and paste as needed, the page will scroll -->
  388.  
  389.  
  390.  
  391.  
  392.  
  393. </div>
  394.  
  395. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  396. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  397. <script>
  398. (function($){
  399. $(document).ready(function(){
  400. $("[title]").style_my_tooltips({
  401. tip_follows_cursor:true,
  402. tip_delay_time:0,
  403. tip_fade_speed:0
  404. }
  405. );
  406. });
  407. })(jQuery);
  408. </script>
  409.  
  410. <div class="credit">
  411. <a href="https://clerihew.tumblr.com/" title="theme by clerihew"><span class="th th-aloe-vera"></span></a>
  412. </div>
  413.  
  414.  
  415. </body>
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!