API tools faq
paste
hermionemessi

BCN page pack: About Me page

hermionemessi
Dec 2nd, 2018 (edited)
1,326
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.77 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--About Me 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/qp1dgt3/Lr9pj4aks/bcnabt-style.css">
  36.  
  37. <style type="text/css">
  38.  
  39.  
  40. /*Customisable sections*/
  41.  
  42. .sectstuff:not(.broll) a:hover {
  43. color:#BBD1E5; /*replace the hexcode to a different hexcode if you want*/
  44. border-bottom:1px solid #BBD1E5; /*this as well*/
  45. }
  46.  
  47. nav.soclinks a:hover .svg-icon {
  48. background: #BBD1E5; /*replace the hexcode to a different hexcode if you want*/
  49. }
  50.  
  51.  
  52.  
  53.  
  54. /*background images of each page section*/
  55. .abtimg {
  56. /*change the image URL here*/
  57. background-image: url('https://static.tumblr.com/4f2083dfe2681f5747ae38664c29d1e0/qp1dgt3/QL2pgsyjh/tumblr_static_1jxi4ekc2toko4cokgowoscw4.png');
  58.  
  59. /*change the position of the image*/
  60. background-position: 50% 50%;
  61. }
  62.  
  63.  
  64.  
  65.  
  66. </style>
  67. </head>
  68. <body class="animsition">
  69.  
  70. <!--main container-->
  71. <main>
  72. <section class="infosect">
  73. <!--sidebar image-->
  74. <div class="imgs abtimg"></div>
  75. <!--/sidebar image-->
  76.  
  77. <!--abt section texts-->
  78. <article class="texts">
  79. <h1>About</h1>
  80.  
  81. <!--About Me main text-->
  82. <div class="sectstuff">
  83.  
  84. <!--basic info box-->
  85. <div class="abtbox">
  86.  
  87. <!--profile picture-->
  88. <div class="profil"><img src="https://i.imgur.com/sBCAxLc.png"></div>
  89. <!--/profile picture-->
  90.  
  91. <!--basic info description-->
  92. <div class="profdesc">
  93.  
  94. <!--Edit subheading here-->
  95. <h2>Name, Age, Country, MBTI</h2>
  96. <!--/to here-->
  97.  
  98. <!--a paragraph of description-->
  99. <p class="qt">
  100. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  101. </p>
  102. <!--to here-->
  103.  
  104.  
  105. <!--about me links-->
  106. <nav class="soclinks">
  107.  
  108. <!--home link-->
  109. <a href="/"class="a-link" title="refresh">
  110. <svg class="svg-icon" viewBox="0 0 20 20">
  111. <path d="M18.121,9.88l-7.832-7.836c-0.155-0.158-0.428-0.155-0.584,0L1.842,9.913c-0.262,0.263-0.073,0.705,0.292,0.705h2.069v7.042c0,0.227,0.187,0.414,0.414,0.414h3.725c0.228,0,0.414-0.188,0.414-0.414v-3.313h2.483v3.313c0,0.227,0.187,0.414,0.413,0.414h3.726c0.229,0,0.414-0.188,0.414-0.414v-7.042h2.068h0.004C18.331,10.617,18.389,10.146,18.121,9.88 M14.963,17.245h-2.896v-3.313c0-0.229-0.186-0.415-0.414-0.415H8.342c-0.228,0-0.414,0.187-0.414,0.415v3.313H5.032v-6.628h9.931V17.245z M3.133,9.79l6.864-6.868l6.867,6.868H3.133z"></path>
  112. </svg>
  113. </a>
  114. <!--/home link-->
  115.  
  116. {block:AskEnabled}
  117. <!--ask link-->
  118. <a href="/ask"class="a-link"title="ask">
  119. <svg class="svg-icon" viewBox="0 0 20 20">
  120. <path d="M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z"></path>
  121. </svg>
  122. </a>
  123. <!--/ask link-->
  124. {/block:AskEnabled}
  125.  
  126.  
  127.  
  128. <!--a link: to change the URL just edit the thing inside the "href" attribute-->
  129. <a href="/"class="a-link" title="a link">
  130. <svg class="svg-icon" viewBox="0 0 20 20">
  131. <path d="M16.469,8.924l-2.414,2.413c-0.156,0.156-0.408,0.156-0.564,0c-0.156-0.155-0.156-0.408,0-0.563l2.414-2.414c1.175-1.175,1.175-3.087,0-4.262c-0.57-0.569-1.326-0.883-2.132-0.883s-1.562,0.313-2.132,0.883L9.227,6.511c-1.175,1.175-1.175,3.087,0,4.263c0.288,0.288,0.624,0.511,0.997,0.662c0.204,0.083,0.303,0.315,0.22,0.52c-0.171,0.422-0.643,0.17-0.52,0.22c-0.473-0.191-0.898-0.474-1.262-0.838c-1.487-1.485-1.487-3.904,0-5.391l2.414-2.413c0.72-0.72,1.678-1.117,2.696-1.117s1.976,0.396,2.696,1.117C17.955,5.02,17.955,7.438,16.469,8.924 M10.076,7.825c-0.205-0.083-0.437,0.016-0.52,0.22c-0.083,0.205,0.016,0.437,0.22,0.52c0.374,0.151,0.709,0.374,0.997,0.662c1.176,1.176,1.176,3.088,0,4.263l-2.414,2.413c-0.569,0.569-1.326,0.883-2.131,0.883s-1.562-0.313-2.132-0.883c-1.175-1.175-1.175-3.087,0-4.262L6.51,9.227c0.156-0.155,0.156-0.408,0-0.564c-0.156-0.156-0.408-0.156-0.564,0l-2.414,2.414c-1.487,1.485-1.487,3.904,0,5.391c0.72,0.72,1.678,1.116,2.696,1.116s1.976-0.396,2.696-1.116l2.414-2.413c1.487-1.486,1.487-3.905,0-5.392C10.974,8.298,10.55,8.017,10.076,7.825"></path>
  132. </svg>
  133. </a>
  134. <!--/a link-->
  135.  
  136. <!--a link: to change the URL just edit the thing inside the "href" attribute-->
  137. <a href="/"class="a-link" title="a link">
  138. <svg class="svg-icon" viewBox="0 0 20 20">
  139. <path d="M14.68,12.621c-0.9,0-1.702,0.43-2.216,1.09l-4.549-2.637c0.284-0.691,0.284-1.457,0-2.146l4.549-2.638c0.514,0.661,1.315,1.09,2.216,1.09c1.549,0,2.809-1.26,2.809-2.808c0-1.548-1.26-2.809-2.809-2.809c-1.548,0-2.808,1.26-2.808,2.809c0,0.38,0.076,0.741,0.214,1.073l-4.55,2.638c-0.515-0.661-1.316-1.09-2.217-1.09c-1.548,0-2.808,1.26-2.808,2.809s1.26,2.808,2.808,2.808c0.9,0,1.702-0.43,2.217-1.09l4.55,2.637c-0.138,0.332-0.214,0.693-0.214,1.074c0,1.549,1.26,2.809,2.808,2.809c1.549,0,2.809-1.26,2.809-2.809S16.229,12.621,14.68,12.621M14.68,2.512c1.136,0,2.06,0.923,2.06,2.06S15.815,6.63,14.68,6.63s-2.059-0.923-2.059-2.059S13.544,2.512,14.68,2.512M5.319,12.061c-1.136,0-2.06-0.924-2.06-2.06s0.923-2.059,2.06-2.059c1.135,0,2.06,0.923,2.06,2.059S6.454,12.061,5.319,12.061M14.68,17.488c-1.136,0-2.059-0.922-2.059-2.059s0.923-2.061,2.059-2.061s2.06,0.924,2.06,2.061S15.815,17.488,14.68,17.488"></path>
  140. </svg>
  141. </a>
  142. <!--/a link-->
  143. </nav>
  144. <!--/about me links-->
  145. </div>
  146. <!--/basic info description-->
  147. </div>
  148. <!--/basic info box-->
  149.  
  150. <!--Write your longer About Me here-->
  151.  
  152. <!--subheading-->
  153. <h2>Section 1</h2>
  154. <!--/subheading-->
  155.  
  156. <!--regular paragraph-->
  157. <p>
  158. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  159. </p>
  160. <!--/regular paragraph-->
  161.  
  162. <!--for quotes-->
  163. <p class="maintxt qt">
  164. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  165. </p>
  166. <!--/for quotes-->
  167.  
  168. <!--subheading-->
  169. <h2>Section 2</h2>
  170. <!--/subheading-->
  171.  
  172. <!--regular paragraph-->
  173. <p>
  174. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  175. </p>
  176. <!--/regular paragraph-->
  177.  
  178. <!--for quotes-->
  179. <p class="maintxt qt">
  180. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  181. </p>
  182. <!--/for quotes-->
  183.  
  184. <!--End of longer about me-->
  185. </div>
  186. <!--/About Me main text-->
  187. </article>
  188. <!--/abt section texts-->
  189. </section>
  190. </main>
  191. <!--/main container-->
  192.  
  193. <!--Don't mess with the credit-->
  194. <div class="creds">
  195. <figure>
  196. <figcaption>
  197. <p>
  198. <a href="https://liohnelmessi.tumblr.com" title="liohnelmessi">
  199. <span>T</span>
  200. <span>H</span>
  201. <span>M</span>
  202. </a>
  203. </p>
  204. </figcaption>
  205. </figure>
  206. </div>
  207. <!--Don't mess with the credit-->
  208.  
  209. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  210.  
  211. <!-- animsition.css -->
  212. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/css/animsition.min.css">
  213.  
  214. <!-- animsition.js -->
  215. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  216.  
  217. <script>
  218. $(document).ready(function() {
  219.  
  220. $(".animsition").animsition({
  221. inClass: 'fade-in',
  222. outClass: 'fade-out',
  223. inDuration: 1500,
  224. outDuration: 800,
  225. linkElement: '.a-link',
  226. loading: true,
  227. loadingParentElement: 'body',
  228. loadingClass: 'animsition-loading',
  229. loadingInner: '',
  230. timeout: true,
  231. timeoutCountdown: 1800,
  232. onLoadEvent: true,
  233. browser: [ 'animation-duration', '-webkit-animation-duration'],
  234. overlay : false,
  235. overlayClass : 'animsition-overlay-slide',
  236. overlayParentElement : 'body',
  237. transition: function(url){ window.location.href = url; }
  238. });
  239.  
  240.  
  241. });
  242.  
  243. </script>
  244.  
  245. <script src="https://static.tumblr.com/p0knose/nRYp3ktqo/jquery.style-my-tooltips.js"></script>
  246.  
  247. <script>
  248. $(document).ready(function(){
  249.  
  250. $("a[title],img[title],[title]").style_my_tooltips({
  251.  
  252. tip_follows_cursor:true,
  253.  
  254. tip_delay_time:30,
  255.  
  256. tip_fade_speed:300,
  257.  
  258. attribute:"title"
  259.  
  260. });
  261.  
  262. });
  263.  
  264. </script>
  265. </body>
  266. </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!