API tools faq
paste
aeternaphantasia

about page #03: tightrope

aeternaphantasia
Mar 7th, 2018 (edited)
3,106
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.67 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <title>walking the tightrope.</title> <!--change the title of the page here! this will appear as the title at your current tab.-->
  3. <link rel="shortcut icon" href="{Favicon}">
  4.  
  5. <html>
  6. <head>
  7.  
  8. <!--
  9.  
  10. About Page #03: Tightrope
  11. coded by kuzuriha
  12.  
  13. 1. Don't remove the credit.
  14. 2. Don't move the credit. Just leave it there.
  15. 3. Don't use as a base code.
  16. 4. Please enjoy! If you find any bugs, please contact me! c:
  17.  
  18. -->
  19.  
  20. <!--Heads up!-->
  21.  
  22. <!--Please read the code carefully! I've tried my best to make that all I'm talking about here makes sense and to group the codes based on their usage but if you are still having trouble, please drop me an ask! c: -->
  23.  
  24. <script src="//use.edgefonts.net/montserrat;karla.js"></script>
  25.  
  26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  27.  
  28. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  29.  
  30. <script>
  31.  
  32. (function($){
  33.  
  34. $(document).ready(function(){
  35.  
  36. $("a[title]").style_my_tooltips({
  37.  
  38. tip_follows_cursor:true,
  39.  
  40. tip_delay_time:0,
  41.  
  42. tip_fade_speed:0,
  43.  
  44. attribute:"title"
  45.  
  46. });
  47.  
  48. });
  49.  
  50. })(jQuery);
  51.  
  52. </script>
  53.  
  54. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  55.  
  56. <style type="text/css">
  57. iframe.tmblr-iframe {
  58. z-index:99999999999999!important;
  59. top:0!important;
  60. right:0!important;
  61. opacity:0.4;
  62. /* delete invert(1) from here */
  63. filter:invert(1) contrast(150%);
  64. -webkit-filter:invert(1) contrast(150%);
  65. -o-filter:invert(1) contrast(150%);
  66. -moz-filter:invert(1) contrast(150%);
  67. -ms-filter:invert(1) contrast(150%);
  68. /* to here if your blog has a dark background */
  69. transform:scale(0.65);
  70. transform-origin:100% 0;
  71. -webkit-transform:scale(0.65);
  72. -webkit-transform-origin:100% 0;
  73. -o-transform:scale(0.65);
  74. -o-transform-origin:100% 0;
  75. -moz-transform:scale(0.65);
  76. -moz-transform-origin:100% 0;
  77. -ms-transform:scale(0.65);
  78. -ms-transform-origin:100% 0;}
  79.  
  80. iframe.tmblr-iframe:hover {
  81. opacity:0.6!important;}
  82.  
  83. body{
  84. margin:0;
  85. padding:0;
  86. background:#fff url('') fixed; /**you can change the bg image by pasting new url for your bg image INSIDE the brackets between '' marks.**/
  87. font-family:karla;
  88. font-size:11px;
  89. color:#002836; /**change the color of the body text here.**/
  90. }
  91.  
  92. a{
  93. text-decoration:none;
  94. color:#ccc;
  95. }
  96.  
  97. #sidebar{
  98. width:40%;
  99. height:100%;
  100. top:0;
  101. left:0;
  102. background:#ccc url('https://static.tumblr.com/wdp3vza/OEkp58alq/shianne-morales-559181-unsplash1.jpg') fixed; /**change the link in the bracket if you want to change the background image of the sidebar.**/
  103. position:fixed;
  104. }
  105.  
  106. #title{
  107. width:250px;
  108. border:2px solid #fff;
  109. text-align:center;
  110. padding:20px;
  111. color:#fff;
  112. text-transform:uppercase;
  113. letter-spacing:2px;
  114. font-size:20px;
  115. font-weight:700;
  116. font-family:montserrat;
  117. margin-top:120px;
  118. margin-left:125px;
  119. }
  120.  
  121. #desc{
  122. width:250px;
  123. padding:20px;
  124. min-height:60px;
  125. max-height:100px;
  126. border:2px solid #fff;
  127. margin-left:125px;
  128. margin-top:30px;
  129. color:#fff;
  130. letter-spacing:2px;
  131. position:absolute;
  132. font-family:karla;
  133. }
  134.  
  135. #about{
  136. position:fixed;
  137. margin-left:calc(40% + 130px);
  138. margin-top:150px;
  139. width:520px;
  140. padding:20px;
  141. height:300px;
  142. border:1px solid #CFDAE8;
  143. background:#fff;
  144. }
  145.  
  146. #navbar{
  147. width:290px;
  148. position:absolute;
  149. margin-left:140px;
  150. margin-top:210px;
  151. height:30px;
  152. }
  153.  
  154. .navlink a{
  155. display:inline-block;
  156. min-width:30px;
  157. padding:6px;
  158. text-align:center;
  159. text-transform:uppercase;
  160. background:#fff;
  161. margin-right:10px;
  162. font-family:karla;
  163. }
  164.  
  165. #aboutbar{
  166. width:140px;
  167. height:340px;
  168. border-right:1px solid #CFDAE8;
  169. position:absolute;
  170. left:0;
  171. top:0;
  172. }
  173.  
  174. #aboutimg{
  175. width:100px;
  176. height:100px;
  177. border-radius:300px; /*delete this if you want a square icon*/
  178. position:absolute;
  179. margin-top:40px;
  180. margin-left:20px;
  181. }
  182.  
  183. #aboutimg img{
  184. width:100px;
  185. height:100px;
  186. border-radius:300px; /*delete this if you want a square icon*/
  187. max-width:100px;
  188. max-height:100px;
  189. }
  190.  
  191. #infobox{
  192. width:120px;
  193. height:140px;
  194. position:absolute;
  195. background:#fff;
  196. margin:10px;
  197. margin-top:160px;
  198. }
  199.  
  200. .infolabel{
  201. display:block;
  202. padding:10px;
  203. margin-bottom:10px;
  204. border:1px solid #CFDAE8;
  205. font-family:karla;
  206. text-transform:uppercase;
  207. }
  208.  
  209. .infoicon{
  210. float:left;
  211. background:#CFDAE8;
  212. font-size:11px;
  213. color:#fff;
  214. width:13px;
  215. padding:10px;
  216. margin:-10px;
  217. margin-right:10px;
  218. height:13px;
  219. text-align:center;
  220. }
  221.  
  222. #aboutxt{
  223. padding:15px;
  224. position:absolute;
  225. width:350px;
  226. left:160px;
  227. text-align:justify;
  228. height:270px;
  229. max-height:270px;
  230. overflow:scroll;
  231. }
  232.  
  233. #aboutxt::-webkit-scrollbar{
  234. display:none!important;
  235. }
  236.  
  237. #aboutxt a{
  238. color:#CFDAE8; /**change the color of the about links here**/
  239. }
  240.  
  241. #aboutxt a:hover{
  242. color:#CFE7E8;
  243. }
  244.  
  245. #aboutxt b, strong{
  246. color:#CFDAE8; /**change the color of bolded text here**/
  247. }
  248.  
  249. #aboutxt i, em{
  250. color:#CFDAE8; /**change the color of italicized text here**/
  251. }
  252.  
  253. /**please don't touch this!**/
  254.  
  255. #credit a{
  256. bottom:10px;
  257. right:10px;
  258. position:fixed;
  259. text-align:center;
  260. width:30px;
  261. padding:10px;
  262. border:1px solid #ccc;
  263. }
  264.  
  265. </style>
  266. </head>
  267.  
  268. <body>
  269. <div id="sidebar">
  270.  
  271. <div id="title">tightrope.<!--you can change the title here. make sure to keep it short.-->
  272. </div>
  273.  
  274. <div id="desc">
  275. <!--You can write anything you want here. But make sure to keep it short.-->
  276. High in the sky
  277. <br>
  278. We can see the whole world down below
  279. <br>
  280. We're walking the tightrope
  281. <br>
  282. Never sure, will you catch me if I should fall?
  283. </div>
  284.  
  285. <div id="navbar">
  286. <div class="navlink">
  287. <a href="/">home</a>
  288. <a href="/ask">msg</a>
  289. <a href="put the URL of your link here"><!--change the TITLE of the links here-->link 1</a>
  290. <a href="put the URL of your link here"><!--change the TITLE of the links here-->link 2</a>
  291. <a href="put the URL of your link here"><!--change the TITLE of the links here-->link 3</a>
  292.  
  293. </div>
  294. </div>
  295. </div>
  296.  
  297. <div id="about">
  298.  
  299. <div id="aboutbar">
  300. <div id="aboutimg">
  301. <img src="https://static.tumblr.com/wdp3vza/yPrp585o3/shianne-morales-559181-unsplash2.jpg"/>
  302. </div>
  303. <div id="infobox">
  304.  
  305. <!--Changing the icons
  306.  
  307. I used @saturnthms' font icons (Saturn Icons). To change the icons, change ONLY the sf-name INSIDE the span class="sf-...". Go to their documentation page (https://saturnthms.com/font) and find the icon you like, then replace the icon. E.g: if you want to replace the user icon, then replace sf-user-o with sf-something-of-your-choice.
  308.  
  309. -->
  310. <div class="infolabel">
  311. <div class="infoicon">
  312. <span class="sf sf-user-o"></span>
  313. </div>
  314. <!--You can fill this space with anything you want. Just make sure to keep it short.-->
  315. </div>
  316.  
  317. <div class="infolabel">
  318. <div class="infoicon">
  319. <span class="sf sf-location-o"></span>
  320. </div>
  321.  
  322. <!--You can fill this space with anything you want. Just make sure to keep it short.-->
  323. </div>
  324.  
  325. <div class="infolabel">
  326. <div class="infoicon">
  327. <span class="sf sf-star-o"></span>
  328. </div>
  329.  
  330. <!--You can fill this space with anything you want. Just make sure to keep it short.-->
  331. </div>
  332.  
  333. <div class="infolabel">
  334. <div class="infoicon">
  335. <span class="sf sf-book-o"></span>
  336. </div>
  337.  
  338. <!--You can fill this space with anything you want. Just make sure to keep it short.-->
  339. </div>
  340.  
  341. </div>
  342. </div>
  343.  
  344. <div id="aboutxt">
  345. <!--This is where you write about yourself. You can make it either very short or very long -- don't worry, you have an unlimited amount of space to write about yourself!-->
  346. </div>
  347.  
  348.  
  349. </div>
  350.  
  351. <!--please don't touch this!-->
  352. <div id="credit"><a href="https://kuzuriha.tumblr.com">thm.</a></div>
  353. </body>
  354. </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!