API tools faq
paste
hermionemessi

BCN page pack: Custom Blogroll

hermionemessi
Dec 2nd, 2018 (edited)
491
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--Custom Blogroll Page (from Barcelona page pack) by liohnelmessi
  4.  
  5. © 2018 by liohnelmessi (an imprint of antoniosvivaldi / athenathms)
  6.  
  7. Note:
  8.  
  9. - Optimised for modern browsers e.g. Google Chrome / Opera
  10. - Optimised for computer monitor sizes 13in. ~ 15in.
  11. - Common terms of use apply
  12. - Feel free to tweak the layout as long as the credit stays intact
  13.  
  14. -->
  15. <head>
  16.  
  17. <meta charset="UTF-8" />
  18. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  19. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <title>{Title}</title>
  22.  
  23. <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
  24.  
  25. <link href="https://fonts.googleapis.com/css?family=Rosario:400,400i,700,700i" rel="stylesheet">
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Tinos:700,700i" rel="stylesheet">
  28.  
  29. <link href="https://fonts.googleapis.com/css?family=Lora:400,400i" rel="stylesheet">
  30.  
  31. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
  32.  
  33. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  34.  
  35. <link rel="stylesheet" href="https://static.tumblr.com/xbvpdcx/ghEpiyuu7/bcnbroll-style.css">
  36.  
  37.  
  38.  
  39. <style type="text/css">
  40.  
  41. @media screen and (max-width: 960px) {
  42. #sidelinks a {display:block!important;}
  43. }
  44.  
  45. /*Customisable sections*/
  46. @media screen and (min-width: 960px) {
  47. #sidelinks a {
  48. background:rgba(255,255,255,0.3);
  49. color:#fff;
  50. }
  51.  
  52. }
  53.  
  54. #sidelinks a:hover {
  55. color:#fff;
  56. background: rgba(187, 209, 229, 0.8);
  57. }
  58.  
  59. .sectstuff:not(.broll) a:hover {
  60. color:#BBD1E5; /*replace the hexcode to a different hexcode if you want*/
  61. border-bottom:1px solid #BBD1E5; /*this as well*/
  62. }
  63.  
  64.  
  65.  
  66.  
  67.  
  68. /*background images of each page section*/
  69. .brollimg {
  70. /*change the image URL here*/
  71. background-image: url('https://static.tumblr.com/4f2083dfe2681f5747ae38664c29d1e0/qp1dgt3/QL2pgsyjh/tumblr_static_1jxi4ekc2toko4cokgowoscw4.png');
  72.  
  73. /*change the position of the image*/
  74. background-position: 50% 50%;
  75. }
  76.  
  77.  
  78.  
  79.  
  80. </style>
  81. </head>
  82. <body class="animsition">
  83.  
  84.  
  85. <div id="sidelinks">
  86.  
  87. <a class="a-link"href="/"title="home"><span class="lnr lnr-home"></span></a>
  88.  
  89. <!--a link here-->
  90. <a class="a-link"href="/" title="a link"><span class="lnr lnr-bookmark"></span></span></a>
  91. <!--/ a link here-->
  92.  
  93.  
  94. <!--a link here-->
  95. <a class="a-link"href="/" title="a link"><span class="lnr lnr-link"></span></a>
  96. <!--/ a link here-->
  97.  
  98.  
  99.  
  100. </div>
  101.  
  102. <!--main container-->
  103. <main>
  104. <section class="infosect">
  105. <!--sidebar image-->
  106. <div class="imgs brollimg"></div>
  107. <!--/sidebar image-->
  108.  
  109. <!--blogroll section contents-->
  110. <article class="texts">
  111. <h1>Blogroll</h1>
  112. <!--blogroll container-->
  113. <div class="broll sectstuff">
  114. <!--add your fave blogs here-->
  115.  
  116. <!--a friend's blog-->
  117. <div class="followed">
  118. <!--add your friend's blog link (replace the # to the full HTML URL to their blogs) + username (replace URL to their blog's username)-->
  119. <a href="#"title="URL">
  120.  
  121. <!--change the favicon here-->
  122. <img src="https://78.media.tumblr.com/avatar_52a54607a6d9_128.png">
  123. </a>
  124. </div>
  125. <!--/a friend's blog-->
  126.  
  127. <!--another friend's blog-->
  128. <div class="followed"><a href="#"title="URL"><img src="https://i.imgur.com/sBCAxLc.png"></a></div>
  129. <!--/another friend's blog-->
  130.  
  131. <div class="followed"><a href="#"title="URL"><img src="https://78.media.tumblr.com/avatar_52a54607a6d9_128.png"></a></div>
  132.  
  133.  
  134. <div class="followed"><a href="#"title="URL"><img src="https://i.imgur.com/sBCAxLc.png"></a></div>
  135.  
  136. <div class="followed"><a href="#"title="URL"><img src="https://i.imgur.com/sBCAxLc.png"></a></div>
  137.  
  138. <div class="followed"><a href="#"title="URL"><img src="https://78.media.tumblr.com/avatar_52a54607a6d9_128.png"></a></div>
  139.  
  140. <div class="followed"><a href="#"title="URL"><img src="https://i.imgur.com/sBCAxLc.png"></a></div>
  141.  
  142. <div class="followed"><a href="#"title="URL"><img src="https://78.media.tumblr.com/avatar_52a54607a6d9_128.png"></a></div>
  143.  
  144.  
  145. <div class="followed"><a href="#"title="URL"><img src="https://78.media.tumblr.com/avatar_52a54607a6d9_128.png"></a></div>
  146.  
  147. <div class="followed"><a href="#"title="URL"><img src="https://i.imgur.com/sBCAxLc.png"></a></div>
  148.  
  149. <div class="followed"><a href="#"title="URL"><img src="https://78.media.tumblr.com/avatar_52a54607a6d9_128.png"></a></div>
  150.  
  151. <div class="followed"><a href="#"title="URL"><img src="https://i.imgur.com/sBCAxLc.png"></a></div>
  152.  
  153. <div class="followed"><a href="#"title="URL"><img src="https://i.imgur.com/sBCAxLc.png"></a></div>
  154.  
  155. <div class="followed"><a href="#"title="URL"><img src="https://78.media.tumblr.com/avatar_52a54607a6d9_128.png"></a></div>
  156.  
  157.  
  158. <!--to here-->
  159. </div>
  160. <!--/blogroll container-->
  161. </article>
  162. <!--/blogroll section contents-->
  163.  
  164.  
  165.  
  166.  
  167. </section>
  168. </main>
  169. <!--/main container-->
  170.  
  171. <!--Don't mess with the credit-->
  172. <div class="creds">
  173. <figure>
  174. <figcaption>
  175. <p>
  176. <a href="https://liohnelmessi.tumblr.com" title="liohnelmessi">
  177. <span>T</span>
  178. <span>H</span>
  179. <span>M</span>
  180. </a>
  181. </p>
  182. </figcaption>
  183. </figure>
  184. </div>
  185. <!--Don't mess with the credit-->
  186.  
  187. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  188.  
  189. <!-- animsition.css -->
  190. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/css/animsition.min.css">
  191.  
  192. <!-- animsition.js -->
  193. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  194.  
  195. <script>
  196. $(document).ready(function() {
  197.  
  198. $(".animsition").animsition({
  199. inClass: 'fade-in',
  200. outClass: 'fade-out',
  201. inDuration: 1500,
  202. outDuration: 800,
  203. linkElement: '.a-link',
  204. loading: true,
  205. loadingParentElement: 'body',
  206. loadingClass: 'animsition-loading',
  207. loadingInner: '',
  208. timeout: true,
  209. timeoutCountdown: 1800,
  210. onLoadEvent: true,
  211. browser: [ 'animation-duration', '-webkit-animation-duration'],
  212. overlay : false,
  213. overlayClass : 'animsition-overlay-slide',
  214. overlayParentElement : 'body',
  215. transition: function(url){ window.location.href = url; }
  216. });
  217.  
  218.  
  219. });
  220.  
  221. </script>
  222.  
  223. <script src="https://static.tumblr.com/p0knose/nRYp3ktqo/jquery.style-my-tooltips.js"></script>
  224.  
  225. <script>
  226. $(document).ready(function(){
  227.  
  228. $("a[title],img[title],[title]").style_my_tooltips({
  229.  
  230. tip_follows_cursor:true,
  231.  
  232. tip_delay_time:30,
  233.  
  234. tip_fade_speed:300,
  235.  
  236. attribute:"title"
  237.  
  238. });
  239.  
  240. });
  241.  
  242. </script>
  243. </body>
  244. </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!