API tools faq
paste
neothm

[PAGE] Friends

neothm
Dec 18th, 2015
1,753
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.01 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Page "Friends" by Neo
  5. Find me on tumblr: @NEOTHM | @NEOVAK
  6. If you spotted a glitch, feel free to message me!
  7. Thank you for taking an interest in this page, enjoy! ♡
  8. -->
  9. <head>
  10. <meta charset="utf-8"><title>{Title}</title><meta name="description" content="{MetaDescription}"><link rel="stylesheet" href="http://static.tumblr.com/wgg6svp/jSmnqcghc/normalizer.css"> <link rel="shortcut icon" href="{Favicon}"> <!--Change "Roboto" to any font you would like to use (from google.com/fonts)--><link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  11. <style>
  12. *{
  13. margin:0;
  14. padding:0;
  15. }
  16. html, body{
  17. height:100%;
  18. }
  19. body{
  20. word-break:break-word;
  21. color:#5B5B5B; /*Text colour*/
  22. background-color:#f6f6f6; /*Background colour*/
  23. -webkit-font-smoothing: antialiased;
  24. -moz-osx-font-smoothing: grayscale;
  25. padding-top:1px;
  26. margin-top:-1px;
  27. /*IF YOU WANT A BACKGROUND IMAGE: */
  28. background-image:url('backgroundimage.png');
  29. background-attachment:fixed;
  30. /*for a full size background (delete this line if you want your bg to tile): */ background-size:cover;
  31.  
  32. font:400 14px/130% 'Helvetica Neue', Arial, sans-serif; /*Change Helvetica Neue to any font you'd like to use (from google.com/fonts) */
  33. }
  34. #noscroll{
  35. overflow:hidden;
  36. }
  37. /*Text selection*/
  38. ::selection{
  39. background-color:#0680fd; /*accent colour*/
  40. color:#fff;
  41. }
  42. ::-moz-selection{
  43. background-color:#0680fd; /*accent colour*/
  44. color:#fff;
  45. }
  46. /*Tumblr controls*/
  47. .tmblr-iframe.iframe-controls--desktop{
  48. filter:invert(100%);
  49. -webkit-filter:invert(100%);
  50. -moz-filter:invert(100%);
  51. -ms-filter:invert(100%);
  52. -o-filter:invert(100%);
  53. transform:scale(.8, .8);
  54. -webkit-transform:scale(.8, .8);
  55. -moz-transform:scale(.8, .8);
  56. z-index:999999999999999999!important;
  57. }
  58. /*Tooltip (links hover title)*/
  59. #s-m-t-tooltip{
  60. line-height:100%;
  61. font-size:8px;
  62. text-transform:uppercase;
  63. text-align:center;
  64. letter-spacing:1px;
  65. max-width:100px;
  66. z-index:9999!important;
  67. padding:5px;
  68. margin:15px;
  69. background:rgba(0,0,0,.8); /*Background colour*/
  70. color:#eee; /*Text colour*/
  71. }
  72.  
  73. main, #lightbox{
  74. border-radius:10px;
  75. background:#fff;
  76. position:fixed;
  77. overflow-y:auto;
  78. top:50%;
  79. left:50%;
  80. height:600px; /*Screen's height*/
  81. margin-top:-300px; /*Screen's height divided by 2*/
  82. width:375px; /*Screen's width*/
  83. margin-left:-187px; /*Screen's width divided by 2*/
  84. border:2px solid #aaa; /*Screen's borders*/
  85. }
  86. a, a:hover, .image span, .image:hover span,
  87. .user img, .user:hover img, #phone > a:hover span, #phone > a > span{
  88. transition-duration:.4s;
  89. }
  90. nav{
  91. text-align:center;
  92. z-index:3;
  93. background-color:#fefefe;
  94. border-bottom:1px solid #d4d4d4;
  95. line-height: 50px;
  96. height:50px;
  97. overflow:hidden;
  98. position:fixed;
  99. width:361px; /*Screen's width - padding (7 * 2) */
  100. padding:12.5px 7px 0;
  101. font-size:0;
  102. border-top-right-radius:13px;
  103. border-top-left-radius:13px;
  104. }
  105. nav a, nav span{
  106. font-size: 18px;
  107. display:block;
  108. float:left;
  109. }
  110. nav a, .y p a{
  111. color:#0680fd; /*accent colour*/
  112. }
  113. .m p a{
  114. color:#fff;
  115. }
  116. nav a{
  117. width:20%;
  118. font-weight:bold;
  119. text-decoration: none;
  120. }
  121. nav span{
  122. width:60%;
  123. }
  124. nav b{
  125. font-size:22px;
  126. display:inline-block;
  127. }
  128. section{
  129. /*background:yellow;*/
  130. position:relative;
  131. overflow:hidden;
  132. padding: 20px;
  133. margin-bottom:80px;
  134. }
  135. section:first-of-type{
  136. margin-top:64px;
  137. }
  138. .timestamp{
  139. text-align: center;
  140. font-size: 10px;
  141. margin: 30px 0;
  142. }
  143. .y p:before{
  144. left: -7px;
  145. background: url('http://static.tumblr.com/wgg6svp/MUmnzkmbd/msg1.png');
  146. }
  147. .m p:before{
  148. right:-7px;
  149. background: url('http://static.tumblr.com/wgg6svp/aHqnzkmbe/msg2.png');
  150.  
  151. /*
  152. Little messages arrows
  153.  
  154. blue:
  155. (#0680fd)
  156. http://static.tumblr.com/wgg6svp/aHqnzkmbe/msg2.png
  157.  
  158. green:
  159. (#0BD318)
  160. http://static.tumblr.com/wgg6svp/MV8nzks76/msg2green.png
  161.  
  162. if you change the accent colour, remember to edit this picture and
  163. change its colour too!
  164. */
  165. }
  166. article p:before {
  167. content: "";
  168. position: absolute;
  169. bottom: -2px;
  170. width: 20px;
  171. height: 15px;
  172. background-size: 100%!important;
  173. z-index: 0;
  174. }
  175.  
  176. .y p, .image span{
  177. background-color: #e6e5eb;
  178. color: #000;
  179. }
  180. .m p{
  181. background-color: #0680fd; /*accent colour*/
  182. color: #fff;
  183. }
  184. /*chat holder*/
  185. article {
  186. max-width: 65%;
  187. display: table;
  188. clear: both;
  189. position:relative;
  190. padding-bottom:10px;
  191. margin-bottom:10px;
  192. }
  193. /*messages on the left (your friends)*/
  194. .y{
  195. padding-left:50px;
  196. }
  197. /*messages on the right (you)*/
  198. .m{
  199. padding-right:50px;
  200. float:right;
  201. }
  202. /*chat bubble*/
  203. article p{
  204. padding: 10px 20px;
  205. position: relative;
  206. border-radius: 20px;
  207. z-index: 1;
  208. }
  209. /*user avatars*/
  210. .user{
  211. position:absolute;
  212. bottom: -10px;
  213. width: 30px;
  214. }
  215. .y .user{
  216. left:0;
  217. }
  218. .m .user{
  219. right:0;
  220. }
  221. .user img{
  222. border-radius: 15px;
  223. width: 30px;
  224. height: 30px;
  225. }
  226. .user:hover img,
  227. .image:hover span{
  228. opacity:.7;
  229. cursor:pointer!important;
  230. }
  231.  
  232. .image{
  233. padding:5px;
  234. max-width:none;
  235. border-radius:10px;
  236. }
  237. .image span{
  238. position:relative;
  239. display:block;
  240. overflow:hidden;
  241. width:90px;
  242. height:90px;
  243. border-radius:10px;
  244. }
  245. .image img{
  246. min-width:100%;
  247. min-height:100%;
  248. position:absolute;
  249. top:0;
  250. border-radius:10px;
  251. left:0;
  252. }
  253. /*POP UP*/
  254. #lightbox{
  255. z-index:2;
  256. background:rgba(0,0,0,.95);
  257. text-align:center;
  258. display:none;
  259. margin-top:-280px;
  260. height:580px;
  261. }
  262. #lightbox img{
  263. display:block;
  264. left:0;
  265. right:0;
  266. bottom:0;
  267. top:0;
  268. position:absolute;
  269. width:90%;
  270. margin:auto;
  271. max-height:90%;
  272. border-radius:5px;
  273. }
  274. #lightbox p{
  275. position:absolute;
  276. bottom:10px;
  277. left:0;
  278. font-size:10px;
  279. right:0;
  280. }
  281. article p a{
  282. font-style:italic;
  283. }
  284. article p a:hover{
  285. color:#000;
  286. }
  287. /*screen decorations*/
  288. .bg, #phone{
  289. position:fixed;
  290. top:50%;
  291. left:50%;
  292. width:442px;
  293. margin-left:-219px;
  294. }
  295. .bg{
  296. margin-top:-432px;
  297. height:872px;
  298. }
  299. #phone{
  300. background:#fff;
  301. border-radius:15px;
  302. margin-top:-350px;
  303. height:720px;
  304. box-shadow:0 0 20px rgba(100,100,100,.2);
  305. }
  306. #phone > a > span{
  307. display:block;
  308. width:20px;
  309. height:20px;
  310. margin:2px;
  311. border:10px solid #fff;
  312. transition-delay:.3s;
  313. }
  314. #phone > a, #phone > a > span{
  315. border-radius:100%;
  316. background:#0680fd; /*accent colour*/
  317. }
  318. #phone > a{
  319. border-radius:25px;
  320. bottom:10px;
  321. width:44px;
  322. height:44px;
  323. transition-delay:0s;
  324. }
  325. #phone > a:hover > span{
  326. background-color:#000;
  327. transition-delay:0s;
  328. }
  329. #phone > a:hover{
  330. background-color:#000;
  331. transition-delay:.3s;
  332. }
  333. #phone > a, #phone > span{
  334. position:absolute;
  335. left:0;
  336. right:0;
  337. margin:auto;
  338. }
  339. #phone > span{
  340. width:60px;
  341. height:8px;
  342. top:25px;
  343. border-radius:10px;
  344. background-color:#000;
  345. }
  346. #phone > span:after{
  347. content:"";
  348. position:absolute;
  349. left:-12px;
  350. width:8px;
  351. height:8px;
  352. background-color:#000;
  353. border-radius:5px;
  354. display:block;
  355. }
  356.  
  357. .backtop{
  358. display:block;
  359. margin:10px 0 50px;
  360. color:#aaa;
  361. font-size:10px;
  362. text-align:center;
  363. }
  364. .backtop:hover{
  365. color:#000;
  366. }
  367. </style>
  368. </head>
  369. <body id="noscroll">
  370. <!--
  371. To show the iphone picture, add this BEFORE "<main>" :
  372.  
  373. <img src="http://static.tumblr.com/wgg6svp/BkFnzks8l/phone.png" class="bg">
  374.  
  375. And delete what follows:
  376. -->
  377.  
  378. <!-- Phone holder, flat design: --><div id="phone"><span></span><a href="/" title="home"><span></span></a></div>
  379.  
  380.  
  381.  
  382.  
  383.  
  384. <main><!-- !BEGINS content -->
  385. <nav><!-- !BEGINS navigation top bar -->
  386. <a href="/">&lsaquo; Index</a>
  387. <span> </span>
  388. <a href="/ask">Contact</a>
  389. </nav><!-- !ENDS navigation top bar -->
  390. <!-- !BEGINS popup --><div id="lightbox"> <img src=""> <p>click anywhere to close</p></div><!-- !ENDS popup -->
  391.  
  392.  
  393.  
  394.  
  395.  
  396. <!-- !BEGINS conversation -->
  397. <section data-user="Bae">
  398. <!--
  399. Where "data-user" is the name/nickname of the person you're talking with
  400. It's what appears in the top bar
  401. -->
  402.  
  403. <!-- !BEGINS timestamp
  404. this whole part is optional and can be deleted
  405. -->
  406. <div class="timestamp">
  407.  
  408. <b>Sun, Feb 15</b> 0:24 AM
  409. </div>
  410. <!-- !ENDS timestamp -->
  411.  
  412. <!-- !BEGINS chat bubble-->
  413. <article class="m"><!-- "m" for me == right bubble -->
  414. <!--
  415. href="" is the link, so your twitter profile / blog, as you wish
  416. title="" is the tooltip. precise your username again there
  417. -->
  418. <a href="https://twitter.com/username" title="@username" class="user">
  419. <img src="youricon.png">
  420. </a>
  421. <p>
  422. <!-- write stuffs with 140 characters or more -->
  423. What is this???? Omg, a chat bubble. Wild.
  424. </p>
  425. </article>
  426. <!-- !ENDS chat bubble-->
  427.  
  428. <!-- !BEGINS chat bubble-->
  429. <article class="y"><!-- "y" for you == left bubble -->
  430. <!--
  431. href="" is the link to your friend's profile
  432. title="" is the username
  433. -->
  434. <a href="https://twitter.com/username" title="@username" class="user">
  435. <img src="friendsicon.png">
  436. </a>
  437. <p>
  438. <!-- write stuffs with 140 characters or more -->
  439. PLease chiLl
  440. </p>
  441. </article>
  442. <!-- !ENDS chat bubble-->
  443.  
  444. <!--
  445. Each chat bubble can only contain ONE icon and ONE <p> ! If you
  446. want to show two messages in a row sent by the same person, select
  447. everything from <article to </article>
  448. Like this:
  449. -->
  450.  
  451. <!-- !BEGINS chat bubble-->
  452. <article class="y">
  453.  
  454. <a href="https://twitter.com/username" title="@username" class="user">
  455. <img src="friendsicon.png">
  456. </a>
  457. <p class="image">
  458. <!--
  459. your messages can contain images
  460. but it's either ONLY text or ONLY one image, do not mix!
  461.  
  462. 1) Add: class="image" to <p>
  463. 2) Write <span> </span> in the paragraph
  464. 3) Include your image tag inside the <span>
  465. -->
  466. <span> <img src="meme.png"> </span>
  467. </p>
  468. </article>
  469. <!-- !ENDS chat bubble-->
  470.  
  471.  
  472. <!--
  473. * A conversation can have as many chat bubbles as you want
  474.  
  475. * How to upload your icons: http://itsphotoshop.com/post/126587649181/how-to-add-pictures-to-themes-tumblr-update
  476. -->
  477.  
  478. </section><!-- !ENDS conversation -->
  479.  
  480.  
  481.  
  482. <!-- An example: -->
  483.  
  484.  
  485. <!-- !BEGINS conversation -->
  486. <section data-user="Side-bae">
  487. <div class="timestamp">
  488. <b>Sun, Jul 29</b> 11:34 AM
  489. </div>
  490.  
  491. <article class="m">
  492. <a href="https://twitter.com/jaeIos" title="@jaeIos" class="user">
  493. <img src="http://static.tumblr.com/q8c0vxg/AHanzik6t/younglogifedit.gif">
  494. </a>
  495. <p>
  496. Merry christmas I'm your present
  497. </p>
  498. </article>
  499.  
  500. <article class="y">
  501. <a href="https://twitter.com/yongnams" title="@yongnams" class="user">
  502. <img src="http://38.media.tumblr.com/avatar_8c3837934b8f_128.png">
  503. </a>
  504. <p>
  505. Hmm can I have the receipt
  506. </p>
  507. </article>
  508.  
  509. <article class="m">
  510. <a href="https://twitter.com/jaeIos" title="@jaeIos" class="user">
  511. <img src="http://static.tumblr.com/q8c0vxg/AHanzik6t/younglogifedit.gif">
  512. </a>
  513. <p>
  514. WOW.
  515. </p>
  516. </article>
  517.  
  518. </section><!-- !ENDS conversation -->
  519.  
  520.  
  521.  
  522. <!-- Now do it yourself! :) -->
  523.  
  524.  
  525.  
  526.  
  527.  
  528.  
  529.  
  530.  
  531.  
  532. <!-- Back to top link: --><a class="backtop" href="#">take me to the top.</a>
  533.  
  534. </main><!-- !ENDS conteneur -->
  535.  
  536.  
  537. <!-- You shouldn't touch this --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/wgg6svp/sDinmsq3x/jquery.style-my-tooltips.js"></script><script src="http://static.tumblr.com/emvnqzg/NOVo0fisl/scripts.js"></script>
  538. <script>$(function(){ $('.backtop').click(function(e){e.preventDefault();$('main').animate({scrollTop:0}, 700); });$("[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:200,tip_fade_speed:500});$('nav span').text($('section:first').attr('data-user'));var i=0, scrolltop, src,sections=[], usernames=[]; $('section').each(function(){sections.push(parseInt($(this).height()) + parseInt($(this).offset().top)-50); usernames.push($(this).attr('data-user'));});$('main').scroll(function(){scrolltop=$('main').scrollTop();if(scrolltop > sections[i]){i++;}if(scrolltop < sections[i-1]){i--;}if(scrolltop < $('section:first').height()){i=0;}$('nav span').text(usernames[i]);}); $('.image').click(function(){src=$(this).find('img').attr('src'); $('#lightbox').fadeIn(500).find('img').attr({'src': src}); return false}); $('body').click(function(event){if($('#lightbox').css('display')=='block' && !$(event.target).closest('#lightbox img').length > 0){$('#lightbox').fadeOut(500).find('img').attr({'src': ''});}});});</script>
  539. </body>
  540. </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!