API tools faq
paste
mhango

Honey Bee Page Theme

mhango
Dec 19th, 2019
2,461
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.50 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.  
  5. <!--
  6.  
  7. Honey Bee Theme by Mhango
  8. A Faves / Networks Page Layout
  9. Version 1 (19th December 2019)
  10.  
  11. Credits to
  12. icons8.com for the icons
  13. fonts.google.com for the fonts
  14. Example pictures found on tumblr.
  15.  
  16. Rules: - don't reupload or claim as your own
  17. - don't edit or remove the credits!!!
  18. - don't use as a base code
  19. - thievery will be reported immediately
  20.  
  21. (This theme works both as a blog and a page theme.)
  22.  
  23. For more themes and layouts visit
  24. http://evas-themes.tumblr.com!
  25.  
  26. -->
  27.  
  28.  
  29. <title>{Title}</title>
  30. <link rel="shortcut icon" href="{Favicon}">
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  32. <meta charset="utf-8">
  33.  
  34.  
  35. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  36. <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
  37. <link href='https://fonts.googleapis.com/css?family=Muli:400,300,300italic,400italic' rel='stylesheet' type='text/css'>
  38. <link href="https://fonts.googleapis.com/css?family=ABeeZee|Arimo|Didact+Gothic|Fira+Sans|Nunito|Rubik&display=swap" rel="stylesheet">
  39. <link href="https://fonts.googleapis.com/css?family=Hind:700|IBM+Plex+Sans|Oswald|Yanone+Kaffeesatz&display=swap" rel="stylesheet">
  40. <link href="https://fonts.googleapis.com/css?family=DM+Serif+Text|Lato|Lexend+Deca|PT+Mono|Poiret+One|Roboto|Roboto+Slab&display=swap" rel="stylesheet">
  41.  
  42.  
  43. <!-- TOOLTIP CODE -->
  44.  
  45. <script type="text/javascript"
  46. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  47. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  48. <script>
  49. (function($){
  50. $(document).ready(function(){
  51. $("[title]").style_my_tooltips({
  52. tip_follows_cursor:true,
  53. tip_delay_time:200,
  54. tip_fade_speed:300
  55. }
  56. );
  57. });
  58. })(jQuery);
  59. </script>
  60.  
  61. <!-- END OF TOOLTIP CODE -->
  62.  
  63.  
  64. <style type="text/css">
  65.  
  66.  
  67. .tmblr-iframe {
  68. position:fixed;
  69. z-index:99999999999999999 !important;
  70. }
  71.  
  72. /* Tooltips */
  73.  
  74. #s-m-t-tooltip {
  75. font-weight:600;
  76. font-family: 'Roboto', Helvetica, Arial, sans-serif;
  77. font-size: 10px;
  78. color:#444444;
  79. background-color:#fff7cc;
  80. text-align: center;
  81. max-width:150px;
  82. border: 1px solid #fff7cc;
  83. overflow:auto;
  84. text-transform:uppercase;
  85. position: absolute;
  86. z-index: 999999999999;
  87. padding: 3px 5px 3px 5px;
  88. box-shadow:0px 0px rgba(0,0,0,0.2);
  89. -webkit-transition: all 0.2s ease-in-out;
  90. -moz-transition: all 0.2s ease-in-out;
  91. transition: all 0.2s ease-in-out;
  92. margin:20px 0px 15px 10px;
  93. }
  94.  
  95.  
  96. ::-webkit-scrollbar-thumb{
  97. background-color: #ffe866;
  98. border: 3px solid #ffffff;
  99. height:auto;
  100. -moz-border-radius: 10px;
  101. border-radius: 0px;
  102. }
  103.  
  104. ::-webkit-scrollbar {
  105. height:auto;
  106. width:9px;
  107. background-color: #ffffff;
  108. border: 4px solid #ffffff;
  109. }
  110.  
  111. ::-moz-selection {
  112. background: #fff7cc;
  113. color: #444444;
  114. }
  115.  
  116. ::selection {
  117. background: #fff7cc;
  118. color: #444444;
  119. }
  120.  
  121.  
  122. /* Basic styles */
  123.  
  124. body {
  125. background: #ffffff url('https://assets.tumblr.com/images/x.gif?v=1');
  126. background-attachment:fixed;
  127. background-repeat:repeat;
  128. color: #444444;
  129. font-family: 'Roboto', Helvetica, Arial, sans-serif;
  130. font-weight:500;
  131. font-size:11px;
  132. margin: 0;
  133. padding: 0;
  134.  
  135. }
  136.  
  137. a, a:visited {
  138. color: #213758;
  139. text-decoration: none;
  140. -webkit-transition: all 0.5s ease-in-out;
  141. -moz-transition: all 0.5s ease-in-out;
  142. -o-transition: all 0.5s ease-in-out;
  143. -ms-transition: all 0.5s ease-in-out;
  144. transition: all 0.5s ease-in-out;
  145. }
  146.  
  147. a:hover, .name a:hover {
  148. color:#426eaf;
  149. -webkit-transition: all 0.5s ease-in-out;
  150. -moz-transition: all 0.5s ease-in-out;
  151. -o-transition: all 0.5s ease-in-out;
  152. -ms-transition: all 0.5s ease-in-out;
  153. transition: all 0.5s ease-in-out;
  154. }
  155.  
  156. /* Box container */
  157.  
  158. #content {
  159. margin-left: -25vw;
  160. width: 62vw;
  161. margin-top:2vw;
  162. left:50%;
  163. float: left;
  164. position:absolute;
  165. }
  166.  
  167. /* Member boxes */
  168.  
  169. .member {
  170. overflow:hidden;
  171. display: inline-block;
  172. margin:30px;
  173. }
  174.  
  175. .icon {
  176. padding: 0px;
  177. border:0px solid #fff7cc;
  178. background: #ffffff;
  179. }
  180.  
  181. .icon img {
  182. height:110px;
  183. width:110px;
  184. }
  185.  
  186. .name {
  187. padding:5px 0px 5px 0px;
  188. border-bottom:0px solid #fff7cc;
  189. border-left:0px solid #fff7cc;
  190. border-right:0px solid #fff7cc;
  191. border-bottom-left-radius:5px;
  192. border-bottom-right-radius:5px;
  193. background: #ffd800;
  194. text-align:center;
  195. font-size:10px;
  196. letter-spacing:0.5px;
  197. text-transform:uppercase;
  198. font-weight:700;
  199. font-family: 'Roboto', Helvetica, Arial, sans-serif;
  200. }
  201.  
  202. .name a {
  203. color:#444444;
  204. }
  205.  
  206. .overlay {
  207. text-align:center;
  208. opacity:0;
  209. width:110px;
  210. height:110px;
  211. position:absolute;
  212. background-color:rgba(255,255,255,.8);
  213. padding:1px;
  214. margin-top:-110px;
  215. margin-left:0px;
  216. -webkit-transition: all .6s ease;
  217. -moz-transition: all .6s ease;
  218. -o-transition: all .6s ease;
  219. transition: all .6s ease;
  220. z-index:5;
  221. }
  222.  
  223. .member:hover .overlay {
  224. opacity:1;
  225. -webkit-transition: all .6s ease;
  226. -moz-transition: all .6s ease;
  227. -o-transition: all .6s ease;
  228. transition: all .6s ease;
  229. }
  230.  
  231. .about {
  232. font-size:15px;
  233. margin-top:50px;
  234. font-weight:700;
  235. font-family: 'Playfair Display', 'Roboto', Helvetica, Arial, sans-serif;
  236. z-index:5;
  237. }
  238.  
  239. .diagonal {
  240. position:absolute;
  241. top:50%;
  242. left:50%;
  243. margin-left:-20%;
  244. margin-top:3%;
  245. opacity:0;
  246. width:20%;
  247. background: rgba(255,255,255,0.2);
  248. -webkit-transition: all .5s ease-in-out;
  249. -moz-transition: all .5s ease-in-out;
  250. -ms-transition: all .5s ease-in-out;
  251. -o-transition: all .5s ease-in-out;
  252. transition: all .5s ease-in-out;
  253. z-index:-2;
  254. }
  255.  
  256. .diagonal:after {
  257. content:"";
  258. position:absolute;
  259. opacity:1;
  260. border-top:5px solid #81c0d2;
  261. width:100%;
  262. transform: rotate(45deg);
  263. transform-origin: 50% 50%;
  264. z-index:-2;
  265. }
  266.  
  267. .member:hover .diagonal {
  268. opacity:1;
  269. margin-left:-60%;
  270. margin-top:3%;
  271. width:60%;
  272. background: rgba(255,255,255,0.2);
  273. -webkit-transition: all .5s ease-in-out;
  274. -moz-transition: all .5s ease-in-out;
  275. -ms-transition: all .5s ease-in-out;
  276. -o-transition: all .5s ease-in-out;
  277. transition: all .5s ease-in-out;
  278. z-index:-2;
  279. }
  280.  
  281. .diagonal2 {
  282. position:absolute;
  283. top:50%;
  284. left:50%;
  285. margin-left:-20%;
  286. margin-top:3%;
  287. opacity:0;
  288. width:20%;
  289. background: rgba(255,255,255,0.2);
  290. -webkit-transition: all .5s ease-in-out;
  291. -moz-transition: all .5s ease-in-out;
  292. -ms-transition: all .5s ease-in-out;
  293. -o-transition: all .5s ease-in-out;
  294. transition: all .5s ease-in-out;
  295. z-index:-2;
  296. }
  297.  
  298. .diagonal2:after {
  299. content:"";
  300. position:absolute;
  301. opacity:1;
  302. border-top:5px solid #81c0d2;
  303. width:100%;
  304. transform: rotate(135deg);
  305. transform-origin: 50% 50%;
  306. z-index:-2;
  307. }
  308.  
  309. .member:hover .diagonal2 {
  310. opacity:1;
  311. margin-left:-60%;
  312. margin-top:3%;
  313. width:60%;
  314. background: rgba(255,255,255,0.2);
  315. -webkit-transition: all .5s ease-in-out;
  316. -moz-transition: all .5s ease-in-out;
  317. -ms-transition: all .5s ease-in-out;
  318. -o-transition: all .5s ease-in-out;
  319. transition: all .5s ease-in-out;
  320. z-index:-2;
  321. }
  322.  
  323.  
  324. #important{
  325. bottom:5px;
  326. right:5px;
  327. font-size:12px;
  328. position:fixed;
  329. z-index:9999999999999999999999999999;
  330. }
  331.  
  332. #important a {
  333. color:#444444;
  334. }
  335.  
  336. #important img {
  337. width:12px;
  338. }
  339.  
  340. /* Header */
  341.  
  342. #topbar {
  343. border-right:0px solid #fff7cc;
  344. background:#ffffff;
  345. top:0;
  346. left:0;
  347. width:15vw;
  348. height:100%;
  349. margin:auto;
  350. position:fixed;
  351. padding:0px;
  352. z-index:5;
  353. }
  354.  
  355. #topbar a {
  356. text-decoration: none;
  357. }
  358.  
  359. .blogtitle {
  360. text-align:left;
  361. text-transform:none;
  362. font-weight:700;
  363. -webkit-font-smoothing: antialiased;
  364. -moz-osx-font-smoothing: grayscale;
  365. -webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.2);
  366. font-family: 'Playfair Display', 'Roboto', Helvetica, Arial, sans-serif;
  367. z-index: 999;
  368. padding:0.5vw;
  369. display:block;
  370. }
  371.  
  372.  
  373. /* Shutter Out Horizontal */
  374. .blogtitle {
  375. margin:0px 20px;
  376. -webkit-transform: perspective(1px) translateZ(0);
  377. transform: perspective(1px) translateZ(0);
  378. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  379. position: relative;
  380. background: #ffffff;
  381. -webkit-transition-property: color;
  382. transition-property: color;
  383. -webkit-transition-duration: 0.5s;
  384. transition-duration: 0.5s;
  385. }
  386. .blogtitle:before {
  387. content: "";
  388. position: absolute;
  389. z-index: -1;
  390. top: 0;
  391. bottom: 0;
  392. left: 0;
  393. right: 0;
  394. background: #ffd800;
  395. -webkit-transform: scaleX(0);
  396. transform: scaleX(0);
  397. -webkit-transform-origin: 50%;
  398. transform-origin: 50%;
  399. -webkit-transition-property: transform;
  400. transition-property: transform;
  401. -webkit-transition-duration: 0.5s;
  402. transition-duration: 0.5s;
  403. -webkit-transition-timing-function: ease-out;
  404. transition-timing-function: ease-out;
  405. }
  406. .blogtitle:hover, .blogtitle:focus, .blogtitle:active {
  407. color: #fff;
  408. }
  409. .blogtitle:hover:before, .blogtitle:focus:before, .blogtitle:active:before {
  410. -webkit-transform: scaleX(1);
  411. transform: scaleX(1);
  412. }
  413.  
  414. .desc {
  415. text-align:left;
  416. padding:1vw;
  417. padding-left:2vw;
  418. display:block;
  419. }
  420.  
  421. .blogtitle a {
  422. text-decoration:none;
  423. font-size:25px;
  424. color: #444;
  425. }
  426.  
  427. .navigation {
  428. margin-top:80%;
  429. text-align:left;
  430. }
  431.  
  432. .nav {
  433. margin-top:3%;
  434. }
  435.  
  436. .nav a {
  437. margin-left:1.5vw;
  438. color:#444;
  439. font-size:11px;
  440. font-weight:600;
  441. text-transform:none;
  442. padding:3%;
  443. text-decoration:none;
  444. line-height:200%;
  445. vertical-align: middle;
  446. -webkit-transform: translateZ(0);
  447. transform: translateZ(0);
  448. position: relative;
  449. }
  450.  
  451. .nav a:before {
  452. content: "";
  453. position: absolute;
  454. z-index: -1;
  455. left: 0;
  456. right: 100%;
  457. bottom: 0;
  458. background: #ffd800;
  459. height: 3px;
  460. -webkit-transition-property: right;
  461. transition-property: right;
  462. -webkit-transition-duration: 0.5s;
  463. transition-duration: 0.5s;
  464. -webkit-transition-timing-function: ease-out;
  465. transition-timing-function: ease-out;
  466. }
  467.  
  468. .nav a:hover:before, .nav a:focus:before, .nav a:active:before {
  469. right: 0;
  470. }
  471.  
  472. nav li {
  473. display: inline;
  474. }
  475.  
  476.  
  477. </style>
  478.  
  479.  
  480. <body>
  481.  
  482. <!-- This is your navigation sidebar -->
  483.  
  484. <div id="topbar">
  485.  
  486. <div class="navigation">
  487. <div class="blogtitle"><a href="/">favourites</a></div>
  488.  
  489. <div class="desc">Check out my favourite blogs on the right.</div>
  490.  
  491.  
  492. <div class="nav"><p><a href="/">back to blog</a></p></div>
  493. <div class="nav"><p><a href="https://www.tumblr.com/dashboard">dashboard</a></p></div>
  494. <div class="nav"><p><a href="https://mhango.tumblr.com" target="_blank" title="theme by mhango">theme</a></p></div>
  495.  
  496.  
  497.  
  498. </div></div>
  499.  
  500. <!-- End of your navigation sidebar -->
  501.  
  502.  
  503. <!-- This is the content section. Each one of the member divs stands for one member of your faves page / network. Just replace the parts where it says "NAME", "BLOG NAME" and "USERNAME". Be careful not to delete any <div>s or " because this might destroy the code. -->
  504.  
  505.  
  506. <div id="content">
  507.  
  508.  
  509. <div class="member">
  510. <div class="icon">
  511. <img src="https://66.media.tumblr.com/22214d3dd2623f60d7876b5e8bd788bd/tumblr_o1ai7vRJLC1qzh0vno1_540.jpg"/></div>
  512. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  513. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  514. </div>
  515.  
  516.  
  517. <div class="member">
  518. <div class="icon">
  519. <img src="https://66.media.tumblr.com/fc447d4066e55250773abc9a85303488/tumblr_mlq9wrkdhl1qfz9sio1_500.jpg"/></div>
  520. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  521. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  522. </div>
  523.  
  524.  
  525. <div class="member">
  526. <div class="icon">
  527. <img src="https://66.media.tumblr.com/d7d1b574d756b874db6778bf279050c0/tumblr_p7oc4k7rIO1xr9oy8o1_500.jpg"/></div>
  528. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  529. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  530. </div>
  531.  
  532.  
  533. <div class="member">
  534. <div class="icon">
  535. <img src="https://66.media.tumblr.com/51b31b24593fa5fd858726e219f65624/tumblr_ocxor3ZibB1rn3yyfo1_500.jpg"/></div>
  536. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  537. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  538. </div>
  539.  
  540.  
  541. <div class="member">
  542. <div class="icon">
  543. <img src="https://66.media.tumblr.com/3c37d3fc00e19f7d32f1bb0bf7dff254/tumblr_pp3sgpyFbS1swvezzo1_500.jpg"/></div>
  544. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  545. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  546. </div>
  547.  
  548.  
  549. <div class="member">
  550. <div class="icon">
  551. <img src="https://66.media.tumblr.com/67eac8049c453beec4a9cdf4e85e70e6/tumblr_nhlqy57zNc1ruj18ko1_500.jpg"/></div>
  552. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  553. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  554. </div>
  555.  
  556.  
  557. <div class="member">
  558. <div class="icon">
  559. <img src="https://66.media.tumblr.com/37eeb85ad86d5cc10efbeb3030ad6e20/tumblr_o3h1jqYztv1r3lv1ro1_500.jpg"/></div>
  560. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  561. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  562. </div>
  563.  
  564.  
  565. <div class="member">
  566. <div class="icon">
  567. <img src="https://66.media.tumblr.com/0fbc5d15b983fdfaaf9d5507948e3fd5/tumblr_nhounsq5tO1thxxeco1_500.jpg"/></div>
  568. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  569. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  570. </div>
  571.  
  572.  
  573. <div class="member">
  574. <div class="icon">
  575. <img src="https://66.media.tumblr.com/37b921a26fcf299a6ae1d1adaee8cefe/tumblr_orqshuYT7T1w67d19o1_500.jpg"/></div>
  576. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  577. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  578. </div>
  579.  
  580. <div class="member">
  581. <div class="icon">
  582. <img src="https://66.media.tumblr.com/cc8177cbd949e3a5145ea238bcdd10c9/tumblr_n7oj712a0X1qb0nwpo1_500.jpg"/></div>
  583. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  584. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  585. </div>
  586.  
  587.  
  588. <div class="member">
  589. <div class="icon">
  590. <img src="https://66.media.tumblr.com/62edd4395fd101ea367342236c90573c/tumblr_pl7tj4y6zJ1wum56vo1_500.jpg"/></div>
  591. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  592. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  593. </div>
  594.  
  595.  
  596. <div class="member">
  597. <div class="icon">
  598. <img src="https://66.media.tumblr.com/b9fd4456a9c965dc482e566385d52fc3/tumblr_nw0eejKQmJ1u8qryro1_500.jpg"/></div>
  599. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  600. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  601. </div>
  602.  
  603.  
  604. <div class="member">
  605. <div class="icon">
  606. <img src="https://66.media.tumblr.com/af7697a16ccf73782ecff79bd22db8b9/tumblr_oy0wp6wpgr1wej8g9o1_500.jpg"/></div>
  607. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  608. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  609. </div>
  610.  
  611.  
  612. <div class="member">
  613. <div class="icon">
  614. <img src="https://66.media.tumblr.com/09b6be8d014d953c0cbc53f51b05d04e/tumblr_plj3a7lyFR1vs6299o1_500.jpg"/></div>
  615. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  616. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  617. </div>
  618.  
  619.  
  620. <div class="member">
  621. <div class="icon">
  622. <img src="https://66.media.tumblr.com/f94d638ff995c54390eaeb4fd991ea5e/tumblr_p6zffi7YvM1r6xg0co1_500.jpg"/></div>
  623. <div class="overlay"><div class="diagonal"></div><div class="diagonal2"></div><div class="about">Name</div></div>
  624. <div class="name"><a href="https://USERNAME.tumblr.com">BLOG NAME</a></div>
  625. </div>
  626.  
  627.  
  628.  
  629. <!-- To add more members just copy one paragraph from <div class="member"> to </div></div> and paste it above this comment. -->
  630.  
  631.  
  632. </div>
  633.  
  634. <!-- End of content section -->
  635.  
  636.  
  637.  
  638. <!-- Don't delete or edit this part in any way or I'll find you. -->
  639.  
  640. <div id="important"><a href="https://mhango.tumblr.com" target="_blank" title="theme by mhango"><img src="https://img.icons8.com/ios-glyphs/30/000000/clouds.png"></a></div>
  641.  
  642. <!-- Seriously it's so small just leave it there, ok? -->
  643.  
  644.  
  645. </body>
  646.  
  647. </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!