API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 20th, 2020
619
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.39 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7. <html>
  8. <head>
  9.  
  10. <title></title>
  11. <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  12. <link href='http://fonts.googleapis.com/css?family=Roboto:100,300,400,600' rel='stylesheet' type='text/css'>
  13. <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  14. <link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
  15. <link href='https://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>
  16. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
  17.  
  18.  
  19. <!--- THIS IS THE SCRIPT FOR A FANCY HOVER -->
  20. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  21. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  22. <script>
  23. (function($){
  24. $(document).ready(function(){
  25. $("a[title]").style_my_tooltips({
  26. tip_follows_cursor:true,
  27. tip_delay_time:90,
  28. tip_fade_speed:600,
  29. attribute:"title"
  30. });
  31. });
  32. })(jQuery);
  33. </script>
  34.  
  35. <style>
  36.  
  37. /* initial design @desmund, @bates, @minna: instructions, cleanup and extras added by @leah; instagram scroll taken from @tentacool */
  38.  
  39. @font-face{font-family: instastory; src:url("https://dl.dropbox.com/s/p390okthfpau2od/SF-UI-Text-Medium.ttf");}
  40. @font-face{font-family: instawords; src:url("https://dl.dropbox.com/s/ek441voxv6iacgm/proximanovalight.ttf");}
  41.  
  42. body {
  43. padding-top: 50px;
  44. background-color: #fefefe;
  45. }
  46.  
  47. /* "homepage" - change background colour, fonts, etc here. */
  48. #container {
  49. margin: 0 auto;
  50. width: 700px;
  51. padding-top: 20px;
  52. padding-bottom: 20px;
  53. background-color: #fefefe;
  54. }
  55.  
  56. #headline {
  57. font-family: 'karla', helvetica, sans-serif;
  58. font-weight: 700;
  59. font-size: 28px;
  60. line-height: 90px;
  61. text-transform: lowercase;
  62. color:#222;
  63. text-align:center;
  64. }
  65.  
  66. #navigation {
  67. width:700px;
  68. margin: 0 auto;
  69. position: relative;
  70. }
  71.  
  72. .date {
  73. color: #333;
  74. display: block;
  75. font-family: 'karla', helvetica, serif;
  76. font-size: 13px;
  77. font-weight: 400;
  78. letter-spacing: 0.4px;
  79. line-height: 110%;
  80. text-align:center;
  81. text-transform:lowercase;
  82. padding:0;
  83. }
  84.  
  85. .type {
  86. font-family: 'karla', helvetica, serif;
  87. font-size: 10px;
  88. line-height:100%;
  89. font-weight: 100;
  90. letter-spacing: 0.4px;
  91. text-transform: lowercase;
  92. padding-bottom:5px;
  93. padding-top:2.5px;
  94. text-align:center;
  95. margin:0;
  96. color:#676767;
  97. }
  98.  
  99. .block {
  100. max-width:100px;
  101. display:inline-block;
  102. width: 75px;
  103. position:relative;
  104. text-align:center;
  105. }
  106.  
  107. .object {
  108. margin:0 auto;
  109. }
  110.  
  111. .icon {
  112. height: 34px;
  113. }
  114.  
  115. /* title on each popup, change font size or font here */
  116. .subhead {
  117. font-family: quicksand, sans-serif;
  118. font-size: 25px;
  119. line-height: 100%;
  120. letter-spacing: 1px;
  121. text-transform: uppercase;
  122. display:block;
  123. color:#444;
  124. }
  125.  
  126. /* popup - no altering needed. */
  127. #fade {
  128. display: none;
  129. background: #000;
  130. position: fixed;
  131. left: 0;
  132. top: 0;
  133. width: 100%;
  134. height: 100%;
  135. opacity: .5;
  136. z-index: 9999;
  137. }
  138.  
  139. .popup_block {
  140. display: none;
  141. background: #FFFFFF;
  142. padding: 20px;
  143. float: left;
  144. position: absolute;
  145. top: 50%;
  146. left: 50%;
  147. z-index: 99999;
  148. opacity: 1;
  149. max-height:430px;
  150. overflow:auto;
  151. text-align:justify;
  152. font-family: helvetica neue, roboto condensed, helvetica, arial;
  153. font-size:13px;
  154. line-height:15px;
  155. letter-spacing:0px;
  156. text-transform:none;
  157. }
  158.  
  159. /* makes the neat looking hover box, do not alter */
  160. #s-m-t-tooltip {max-width:200px; width:auto; padding:3px 5px; margin:5px 0px 0px 10px; background-color: rgba(239, 239, 239,0.9); font-family: karla, helvetica, arial; font-size:7px; letter-spacing:+1px; text-transform:uppercase; text-align: justify; color:#222; z-index:999999999999999999; -moz-box-shadow: 1px 2px 1px rgba(0,0,0,.1); -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,.1);}
  161.  
  162. /* gmail hr, do not alter */
  163. hr {
  164. display: block;
  165. height: 1px;
  166. border: 0;
  167. border-top: 1px solid #ccc;
  168. margin: 1em 0;
  169. padding: 0;
  170. }
  171.  
  172. /* tumblr */
  173. .tumblr {background-color:#fff; color: #4c4c4; font-size: 13.5px; line-height: 18px; text-align:left; width:520px; padding:20px; border-radius:5px; }
  174. .tumblrask {background-color: #efefef; width:435px; padding: 20px;}
  175. .tumblraskname {font-weight: bold; color: #a6a6a6;}
  176. .reblog {color:#4c4c4c;font-weight:bold;font-size:13.5px;}
  177. .tumblrtags {color:#aaa; padding-left:4px;margin:2px;}
  178. .tumblruser2 {color:#4c4c4c;font-weight: bold; position:absolute;margin-top:15px;}
  179. .title {font-family: montserrat, helvetica, helvetica neue, sans-serif; font-size: 25px; line-height: 100%; letter-spacing: 0px; color:#444;}
  180.  
  181. /* updated email; gmail // 07/07/18 @leah */
  182. .emailhead {padding-left: 0px; padding-top: 0px; padding-bottom:5px; font-size: 16px; text-transform:none; line-height: 16px; float: left; width: 100%;}
  183. .emaildate {float: right; color: #000; padding-top: 0px; font-size: 12px; font-weight:400;}
  184. .dateline{line-height:35px; padding-right:5px; float:left;}
  185. .emailsender {float:left; padding-top:0px; font-size:10px; height:32px; padding-bottom:5px;}
  186. .sender{padding-left:5px; float:right;}
  187. .from {font-size:13px; line-height:120%; font-weight: normal; color:#000;}
  188. .to {font-size:13px; line-height:120%; font-weight:normal; color: #999;}
  189.  
  190. /* text */
  191. .sentence {position:relative;}
  192. .talking {border-radius: 13px; margin: 10px 10px 3px; padding: 8px; position: relative; }
  193. .talking.to {background-color: #1188fe; color: #FFF; margin-left: 270px; z-index:10; box-shadow: 0 1px 2px rgba(1,1,1,0.2);}
  194. .talking.from {background-color: #F7F7F7; color: #000; margin-right: 270px; z-index:10; box-shadow: 0 1px 2px rgba(1,1,1,0.2);}
  195. .talking.to + .talking.to, .talking.from + .talking.from {margin-top: 15px;}
  196. .talker {font-family:source code pro; font-size:8px; line-height:9px; color: #999; text-transform:uppercase; display:block; position:relative; margin-left:15px;}
  197. .talker.self {text-align:right; margin-right:15px; margin-left:0px;}
  198. .textheader {font-family: helvetica, arial, sans serif; font-size:12px; text-align:center; text-transform: none;}
  199. .img-circle {border-radius: 50%;}
  200.  
  201. /* instagram -- mashed together from desmund and minna */
  202. .igdesc {font-family: 'Roboto', helvetica neue, helvetica; font-size: 12px; font-weight: 400;}
  203. .mainimage{height: 40px; width: 40px; border-radius: 50px;}
  204. .handle {position: relative; font-family: 'Roboto', helvetica neue, helvetica; top:10px; left: 5px;font-size: 13px; font-weight: bold; text-decoration:none; color: #262626;}
  205. #comments{position: absolute; overflow: auto; height: 153px; top: 100px; width: 280px; font-family: 'Roboto', helvetica neue, helvetica; font-size: 12px; font-weight: 400;}
  206.  
  207. /* ig story -- tweaked by lj@ij.com og coding:leah@ij.com */
  208. .storyicon {
  209. border-radius: 100%;
  210. height: 25px;
  211. width: 25px;
  212. position: absolute;
  213. margin-top: 15px;
  214. margin-left: 5px;
  215. }
  216.  
  217. .storyhandle {
  218. font-weight:lighter;
  219. position: absolute;
  220. color: #fff;
  221. font-family: instastory;
  222. font-size: 10px;
  223. margin-top: 20px;
  224. margin-left: 35px;
  225. }
  226.  
  227. .storylink {
  228. font-weight:lighter;
  229. position: absolute;
  230. color: #fff;
  231. font-family: instawords;
  232. font-weight:100;
  233. font-size: 15px;
  234. line-height:15px;
  235. letter-spacing:1px;
  236. margin-top: 20px;
  237. margin-left: 35px;
  238. }
  239.  
  240. .storywords {
  241. font-weight:lighter;
  242. position: absolute;
  243. color: #fff;
  244. font-family: helvetica, instastory;
  245. font-size: 25px;
  246. margin-top: 20px;
  247. margin-left: 35px;
  248. }
  249.  
  250. .storyhour {
  251. position: absolute;
  252. color: #fff;
  253. font-family: instastory;
  254. font-weight:lighter;
  255. font-size: 10px;
  256. margin-top: 20px;
  257. margin-left: 115px;
  258. }
  259.  
  260. .storyexit {
  261. position: absolute;
  262. font-size: 10px;
  263. margin-top: 20px;
  264. margin-left: 175px;
  265. }
  266.  
  267. .storyduration {
  268. position: absolute;
  269. color: #fff;
  270. font-family: instastory, arial, roboto;
  271. font-size: 10px;
  272. margin-top: 5px;
  273. margin-left:-5px;
  274. }
  275.  
  276. .storybottom {
  277. position: absolute;
  278. margin-top: 325px;
  279. margin-left:;
  280. }
  281.  
  282. /* twitter */
  283. .tweet {border: 1px solid #dddddd; font-family: helvetica; font-size: 15px; line-height: 20px; width: 500px;}
  284. .tweet a:link, .tweet a:active, .tweet a:visited {color: #2b7bb9; text-decoration: none;}
  285. .tweet a:hover {color: #3b97e0; text-decoration: none;}
  286. .verified {position: relative; top: 3px;}
  287. .tname{font-size: 14px; font-weight: bold; color: #14171a;} .tname:hover{color: #14171a;} .thandle{color: #657786;} .thandle:hover{color: #657786;} .tweet{position: relative; display: block; margin-left: 20; padding-right: 5;}
  288.  
  289. /* ---- music, from @tentacool phone post ---- */
  290. .musicheader {
  291. margin: 0;
  292. height: 55;
  293. width: 248px;
  294. padding:3px;
  295. background-color: #181818;
  296. color:#fff;
  297. font-family: arial, roboto;
  298. font-size:12px;
  299. font-weight:bold;
  300. text-align:center;
  301. text-transform: none;
  302. }
  303. .musiccontent {
  304. width: 254;
  305. height: 300px;
  306. overflow: auto;
  307. margin: 0;
  308. padding: 0;
  309. background-color: #181818;
  310. font-family: helvetica, arial, sans serif;
  311. font-size: 14px;
  312. line-height: 14px;
  313. text-transform: none;
  314. text-align: left;
  315. overflow-y: auto;
  316. overflow-x: hidden;
  317.  
  318. }
  319. a {color: #fff; text-decoration: none;
  320. }
  321.  
  322. .musictitle {
  323. padding-left:5;
  324. background-color: #181818;
  325. color: #fff;
  326. font-family: arial;
  327. font-size:13px;
  328. text-transform: none;
  329. }
  330. .musicbottom {
  331. height:55px;
  332. width:248px;
  333. padding:3px;
  334. color: #fff;
  335. font-family:arial;
  336. font-size:12px;
  337. background:#222326;
  338. text-align:center;
  339. border-top:1px solid #888;
  340. margin: 0;
  341. }
  342.  
  343.  
  344. </style>
  345.  
  346.  
  347. <script>
  348.  
  349. $(document).ready(function() {
  350.  
  351. //
  352.  
  353. //When you click on a link with class of poplight and the href starts with a #
  354.  
  355. $('a.poplight[href^=#]').click(function() {
  356.  
  357. var popID = $(this).attr('rel'); //Get Popup Name
  358.  
  359. var popURL = $(this).attr('href'); //Get Popup href to define size
  360.  
  361.  
  362.  
  363. //Pull Query & Variables from href URL
  364.  
  365. var query= popURL.split('?');
  366.  
  367. var dim= query[1].split('&');
  368.  
  369. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  370.  
  371.  
  372.  
  373. //Fade in the Popup and add close button
  374.  
  375. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend();
  376.  
  377.  
  378. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  379.  
  380. var popMargTop = ($('#' + popID).height() + 80) / 2;
  381.  
  382. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  383.  
  384.  
  385.  
  386. //Apply Margin to Popup
  387.  
  388. $('#' + popID).css({
  389.  
  390. 'margin-top' : -popMargTop,
  391.  
  392. 'margin-left' : -popMargLeft
  393.  
  394. });
  395.  
  396.  
  397.  
  398. //Fade in Background
  399.  
  400. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  401.  
  402. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  403.  
  404.  
  405.  
  406. return false;
  407.  
  408. });
  409.  
  410.  
  411.  
  412. //Close Popups and Fade Layer
  413.  
  414. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  415.  
  416. $('#fade , .popup_block').fadeOut(function() {
  417.  
  418. $('#fade, a.close').remove(); //fade them both out
  419.  
  420. });
  421.  
  422. return false;
  423.  
  424. });
  425.  
  426.  
  427.  
  428.  
  429.  
  430. });
  431.  
  432. </script>
  433.  
  434. </head>
  435.  
  436. <body>
  437. <div id="container">
  438. <div id="headline">
  439. header
  440. </div>
  441. <div>
  442.  
  443. <div id="navigation"><center>
  444.  
  445. <div class="block">
  446. <div class="date">mon 00</div>
  447. <div class="type">texts</div>
  448. <div class="object"><A href="#?w=600" class="poplight" rel="01" title="texts"><img src="https://cdn4.iconfinder.com/data/icons/flatified/128/messages.png" class="icon"></a></div>
  449. </div>
  450.  
  451. <div class="block">
  452. <div class="date">mon 00</div>
  453. <div class="type">spotify</div>
  454. <div class="object"><A href="#?w=255" class="poplight" rel="02" title="playlist"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Spotify-128.png" class="icon"></a></div>
  455. </div>
  456.  
  457. <div class="block">
  458. <div class="date">mon 00</div>
  459. <div class="type">instagram</div>
  460. <div class="object"><A href="#?w=600" class="poplight" rel="03" title="@username"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Instagram-128.png" height="34"></a></div>
  461. </div>
  462.  
  463. <div class="block">
  464. <div class="date">mon 00</div>
  465. <div class="type">instagram</div>
  466. <div class="object"><A href="#?w=600" class="poplight" rel="04" title="@username w/multiple pics"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Instagram-128.png" height="34"></a></div>
  467. </div>
  468.  
  469. <div class="block">
  470. <div class="date">mon 00</div>
  471. <div class="type">tumblr</div>
  472. <div class="object"><A href="#?w=600" class="poplight" rel="05" title="tumblr"><img src="https://i.imgur.com/HhFB0XC.png" class="icon"></a></div>
  473. </div>
  474.  
  475. <div class="block">
  476. <div class="date">mon 00</div>
  477. <div class="type">email</div>
  478. <div class="object"><A href="#?w=600" class="poplight" rel="06" title="email"><img src="https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_gmail-128.png" class="icon"></a></div>
  479. </div>
  480.  
  481. <div class="block">
  482. <div class="date">mon 00</div>
  483. <div class="type">twitter</div>
  484. <div class="object"><A href="#?w=600" class="poplight" rel="07" title="tweets"><img src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/twitter-256.png" class="icon"></a></div>
  485. </div>
  486.  
  487. <br><br> <!-- START THE NEW ROW HERE -->
  488.  
  489.  
  490.  
  491.  
  492. </div>
  493.  
  494. <!-- THIS IS THE START OF THE FIRST TEXT MESSAGE -->
  495.  
  496. <div id="01" class="popup_block">
  497. <div class="textheader">
  498. <img class="img-circle" src="https://via.placeholder.com/100x100" width="30">
  499. <div style="center; margin-top:2px;">Contact</div>
  500. </div>
  501. <div class="sentence">
  502. <div class="talking from">
  503. Here
  504. </div>
  505. <div class="talker">name</div>
  506. </div>
  507.  
  508. <div class="sentence">
  509. <div class="talking to">
  510. Here
  511. </div>
  512. <div class="talker self">name</div>
  513. </div>
  514.  
  515.  
  516.  
  517. </div>
  518. </div>
  519.  
  520. <!-- THIS IS THE END OF THE FIRST TEXT MESSAGE -->
  521.  
  522.  
  523.  
  524. <!-- THIS IS THE START OF SPOTIFY -->
  525.  
  526. <div id="02" class="popup_block">
  527. <div class="musicheader">
  528. <div style="float:left; margin-right:-5px;">
  529. <img src="https://i.imgur.com/7x9nadi.png" width=10 align=left style="padding-top: 11px;">
  530. </div>
  531. title
  532. <div style="float:right;"><img src="http://i.imgur.com/8vV6Q4J.png?1" align=right style="padding-top: 11px; padding-right: 5px;"></div>
  533. <br>
  534. <center><img src="http://i.imgur.com/VoKkbzm.png" width="190"></center>
  535. </div>
  536. <div class="musiccontent">
  537. <div class="musictitle">
  538.  
  539. <a href="" target="_blank">Song Title</a><br>
  540. <img src="http://i.imgur.com/vQ2CkX0.png" width="13"><small><font color="#888"> Artist • Album</font></small> <div style="float:right;"><img src="http://i.imgur.com/m26MfmR.png" width="15" align="right" style="padding-right: 5px;"></div><br><br>
  541.  
  542. <a href="" target="_blank">Song Title</a><br>
  543. <img src="http://i.imgur.com/vQ2CkX0.png" width="13"><small><font color="#888"> Artist • Album</font></small> <div style="float:right;"><img src="http://i.imgur.com/m26MfmR.png" width="15" align="right" style="padding-right: 5px;"></div><br><br>
  544.  
  545. <a href="" target="_blank">Song Title</a><br>
  546. <img src="http://i.imgur.com/vQ2CkX0.png" width="13"><small><font color="#888"> Artist • Album</font></small> <div style="float:right;"><img src="http://i.imgur.com/m26MfmR.png" width="15" align="right" style="padding-right: 5px;"></div><br><br>
  547.  
  548. <a href="" target="_blank">Song Title</a><br>
  549. <img src="http://i.imgur.com/vQ2CkX0.png" width="13"><small><font color="#888"> Artist • Album</font></small> <div style="float:right;"><img src="http://i.imgur.com/m26MfmR.png" width="15" align="right" style="padding-right: 5px;"></div><br><br>
  550.  
  551. <a href="" target="_blank">Song Title</a><br>
  552. <img src="http://i.imgur.com/vQ2CkX0.png" width="13"><small><font color="#888"> Artist • Album</font></small> <div style="float:right;"><img src="http://i.imgur.com/m26MfmR.png" width="15" align="right" style="padding-right: 5px;"></div><br><br>
  553.  
  554. <a href="" target="_blank">Song Title</a><br>
  555. <img src="http://i.imgur.com/vQ2CkX0.png" width="13"><small><font color="#888"> Artist • Album</font></small> <div style="float:right;"><img src="http://i.imgur.com/m26MfmR.png" width="15" align="right" style="padding-right: 5px;"></div><br><br>
  556.  
  557. <a href="" target="_blank">Song Title</a><br>
  558. <img src="http://i.imgur.com/vQ2CkX0.png" width="13"><small><font color="#888"> Artist • Album</font></small> <div style="float:right;"><img src="http://i.imgur.com/m26MfmR.png" width="15" align="right" style="padding-right: 5px;"></div><br><br>
  559.  
  560. <a href="" target="_blank">Song Title</a><br>
  561. <img src="http://i.imgur.com/vQ2CkX0.png" width="13"><small><font color="#888"> Artist • Album</font></small> <div style="float:right;"><img src="http://i.imgur.com/m26MfmR.png" width="15" align="right" style="padding-right: 5px;"></div><br><br>
  562.  
  563. <a href="" target="_blank">Song Title</a><br>
  564. <img src="http://i.imgur.com/vQ2CkX0.png" width="13"><small><font color="#888"> Artist • Album</font></small> <div style="float:right;"><img src="http://i.imgur.com/m26MfmR.png" width="15" align="right" style="padding-right: 5px;"></div><br><br>
  565.  
  566.  
  567. </div></div>
  568. <div class="musicbottom">
  569. <div style="float:left; margin-right:-5px;"><img src="http://i.imgur.com/3LNstzo.png" width="15" align="left" style="padding-top:5px;"></div>
  570. <center>Song • <font color="#888">Artist</font>
  571. <div style="float:right;"><a href="https://open.spotify.com/track/2qEKsEFEzU5yb6oTtBfLsy" target="_blank"><img src="http://i.imgur.com/eVWS1Gy.png" width="20" align=right style="padding-right: 5px;"></a></div>
  572. <img src="http://i.imgur.com/MxAd2eM.png" width="248">
  573. </center></div>
  574.  
  575. </div>
  576.  
  577. <!-- THIS IS THE END OF SPOTIFY -->
  578.  
  579.  
  580.  
  581. <!-- THIS IS THE START OF FIRST INSTAGRAM -->
  582.  
  583. <div id="03" class="popup_block">
  584. <center><table width="600" cellpadding="0" cellspacing="0" style="border: 1px solid #eee;"><tr><td style="width:300px;" valign="middle"><img src="https://via.placeholder.com/350x350" width="300"></td><td style="border-left: 1px solid #eee;">
  585.  
  586. <table width="100%" cellpadding="12"><tr><td valign="top" style="height:50px;"><img src="https://66.media.tumblr.com/93fbc1d970b6569acc5710980a625f25/tumblr_pmz5hmsVmC1xbh5gao1_r1_400.png" style="height: 35px; width: 35px; border-radius: 50px;" align="left"> <a class="handle">username <img src="http://i.imgur.com/LaB4SRm.png" width="11"></a><br>
  587. </td><tr>
  588.  
  589. <tr><td class="igdesc" style="height:220px;border-top: 1px solid #eee;" valign="top">
  590. <div id="comments">
  591. <font style="font-weight: 600; font-weight: bold;">username</font> caption <font style="font-weight: 600; font-weight: bold;">@tag</font> <font style="font-weight: 600; font-weight: bold;">#hashtag</font><br>
  592.  
  593. <font color="#ccc" style="line-height:20px;">Load more comments</font><br>
  594.  
  595. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  596. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  597. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  598. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  599. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  600. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  601. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  602. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  603. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  604. </div>
  605.  
  606. <img src="http://i.imgur.com/4OIXvd0.png" height="18" style="padding-bottom:3px; padding-top:155px;"><br>
  607. <font style="font-size:12px;font-weight:600;line-height:15px;">0,000 likes</font><br>
  608. <font style="color: #ccc; font-size: 9px; line-height: 15px;">0 HOURS AGO</font>
  609. </td></tr>
  610.  
  611. </td></tr></table>
  612. </td></tr></table>
  613. </center>
  614. </div>
  615.  
  616. <!-- THIS IS THE END OF FIRST INSTAGRAM -->
  617.  
  618.  
  619. <!-- THIS IS THE START OF SECOND INSTAGRAM -->
  620.  
  621. <div id="04" class="popup_block">
  622. <center><table width="600" cellpadding="0" cellspacing="0" style="border: 1px solid #eee;"><tr><td style="width:300px;" valign="middle">
  623.  
  624. <div style="box-sizing: border-box; width: 300px; height: 300px; padding: 0; overflow: hidden;">
  625. <a name="one"></a>
  626.  
  627. <div style="box-sizing: border-box; overflow: hidden; width: 300px; height: 300px; padding-top: 250px; background: url(https://via.placeholder.com/350x350); background-size: 300px;">
  628. <a href="#six" style="float: left; width: 30px; height: 30px; margin-left: 15px; border-radius: 50%; background: #fff; opacity: 0.5;"><img src="https://i.imgur.com/g25tMck.png" style="height: 30px;"></a>
  629. <a href="#two" style="float: right; width: 30px; height: 30px; margin-right: 15px; border-radius: 50%; background: #fff; opacity: 0.5;"><img src="https://i.imgur.com/g25tMck.png" style="height: 30px; transform: rotate(180deg);"></a>
  630. </div>
  631.  
  632. <a name="two"></a>
  633.  
  634. <div style="box-sizing: border-box; overflow: hidden; width: 300px; height: 300px; padding-top: 250px; background: url(https://via.placeholder.com/350x350); background-size: 300px;">
  635. <a href="#one" style="float: left; width: 30px; height: 30px; margin-left: 15px; border-radius: 50%; background: #fff; opacity: 0.5;"><img src="https://i.imgur.com/g25tMck.png" style="height: 30px;"></a>
  636. <a href="#three" style="float: right; width: 30px; height: 30px; margin-right: 15px; border-radius: 50%; background: #fff; opacity: 0.5;"><img src="https://i.imgur.com/g25tMck.png" style="height: 30px; transform: rotate(180deg);"></a>
  637. </div>
  638.  
  639. <a name="three"></a>
  640.  
  641. <div style="box-sizing: border-box; overflow: hidden; width: 300px; height: 300px; padding-top: 250px; background: url(https://via.placeholder.com/350x350); background-size: 300px;">
  642. <a href="#two" style="float: left; width: 30px; height: 30px; margin-left: 15px; border-radius: 50%; background: #fff; opacity: 0.5;"><img src="https://i.imgur.com/g25tMck.png" style="height: 30px;"></a>
  643. <a href="#four" style="float: right; width: 30px; height: 30px; margin-right: 15px; border-radius: 50%; background: #fff; opacity: 0.5;"><img src="https://i.imgur.com/g25tMck.png" style="height: 30px; transform: rotate(180deg);"></a>
  644. </div>
  645.  
  646. <a name="four"></a>
  647.  
  648. <div style="box-sizing: border-box; overflow: hidden; width: 300px; height: 300px; padding-top: 250px; background: url(https://via.placeholder.com/350x350); background-size: 300px;">
  649. <a href="#three" style="float: left; width: 30px; height: 30px; margin-left: 15px; border-radius: 50%; background: #fff; opacity: 0.5;"><img src="https://i.imgur.com/g25tMck.png" style="height: 30px;"></a>
  650. <a href="#five" style="float: right; width: 30px; height: 30px; margin-right: 15px; border-radius: 50%; background: #fff; opacity: 0.5;"><img src="https://i.imgur.com/g25tMck.png" style="height: 30px; transform: rotate(180deg);"></a>
  651. </div>
  652.  
  653. <a name="five"></a>
  654.  
  655. <div style="box-sizing: border-box; overflow: hidden; width: 300px; height: 300px; padding-top: 250px; background: url(https://via.placeholder.com/350x350); background-size: 300px;">
  656. <a href="#four" style="float: left; width: 30px; height: 30px; margin-left: 15px; border-radius: 50%; background: #fff; opacity: 0.5;"><img src="https://i.imgur.com/g25tMck.png" style="height: 30px;"></a>
  657. <a href="#six" style="float: right; width: 30px; height: 30px; margin-right: 15px; border-radius: 50%; background: #fff; opacity: 0.5;"><img src="https://i.imgur.com/g25tMck.png" style="height: 30px; transform: rotate(180deg);"></a>
  658. </div>
  659.  
  660.  
  661. <a name="six"></a>
  662.  
  663. <div style="box-sizing: border-box; overflow: hidden; width: 300px; height: 300px; padding-top: 250px; background: url(https://via.placeholder.com/350x350); background-size: 300px;">
  664. <a href="#five" style="float: left; width: 30px; height: 30px; margin-left: 15px; border-radius: 50%; background: #fff; opacity: 0.5;"><img src="https://i.imgur.com/g25tMck.png" style="height: 30px;"></a>
  665. <a href="#one" style="float: right; width: 30px; height: 30px; margin-right: 15px; border-radius: 50%; background: #fff; opacity: 0.5;"><img src="https://i.imgur.com/g25tMck.png" style="height: 30px; transform: rotate(180deg);"></a>
  666. </div></td>
  667.  
  668. <td style="border-left: 1px solid #eee;">
  669.  
  670. <table width="100%" cellpadding="12"><tr><td valign="top" style="height:50px;"><img src="https://66.media.tumblr.com/93fbc1d970b6569acc5710980a625f25/tumblr_pmz5hmsVmC1xbh5gao1_r1_400.png" style="height: 35px; width: 35px; border-radius: 50px;" align="left"> <a class="handle">username <img src="http://i.imgur.com/LaB4SRm.png" width="11"></a><br>
  671. </td><tr>
  672.  
  673. <tr><td class="igdesc" style="height:20px;border-top: 1px solid #eee;" valign="top">
  674. <div id="comments">
  675. <font style="font-weight: 600; font-weight: bold;">username</font> caption <font style="font-weight: 600; font-weight: bold;">@tag</font> <font style="font-weight: 600; font-weight: bold;">#hashtag</font><br>
  676.  
  677. <font color="#ccc" style="line-height:20px;">Load more comments</font><br>
  678.  
  679. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  680. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  681. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  682. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  683. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  684. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  685. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  686. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  687. <font style="font-weight: 600; font-weight: bold;">username</font> comment<br>
  688. </div>
  689.  
  690. <img src="http://i.imgur.com/4OIXvd0.png" height="18" style="padding-bottom:3px; padding-top:155px;"><br>
  691. <font style="font-size:12px;font-weight:600;line-height:15px;">0,000 likes</font><br>
  692. <font style="color: #ccc; font-size: 9px; line-height: 15px;">0 HOURS AGO</font>
  693. </td></tr>
  694.  
  695. </td></tr></table>
  696. </td></tr></table>
  697. </center>
  698. </div>
  699.  
  700. <!-- THIS IS THE END OF SECOND INSTAGRAM -->
  701.  
  702.  
  703. <!-- THIS IS THE START OF TUMBLR -->
  704.  
  705. <div id="05" class="popup_block"style="background-color:#36465d;">
  706. <center><div class="tumblr" style="border-radius: 5px;">
  707.  
  708. <img src="https://78.media.tumblr.com/3fa8a6cab8bcc403b9d74680ebda4cbb/tumblr_pegqozVWyI1w308hvo5_400.jpg" style="width:30px;padding:8px;"> <font class="tumblruser2">username</font><p>
  709.  
  710. <p align="justify" style="font-weight: normal;">
  711. whatever content you want here</p>
  712. <font class="tumblrtags">#tag</font> <font class="tumblrtags">#tag</font> <br><br>
  713.  
  714. <font style="color:#aaa;font-weight:bold;">000 notes</font>
  715. </div>
  716.  
  717. </center>
  718.  
  719. <br>
  720.  
  721. <center><div class="tumblr" style="border-radius: 5px;">
  722.  
  723. <img src="https://78.media.tumblr.com/3fa8a6cab8bcc403b9d74680ebda4cbb/tumblr_pegqozVWyI1w308hvo5_400.jpg" style="width:30px;padding:8px;"> <font class="tumblruser2">username</font><p>
  724.  
  725. <p align="justify" style="font-weight: normal;">
  726. whatever content you want here</p>
  727. <font class="tumblrtags">#tag</font> <font class="tumblrtags">#tag</font> <br><br>
  728.  
  729. <font style="color:#aaa;font-weight:bold;">000 notes</font>
  730. </div>
  731.  
  732. </center>
  733.  
  734. <br>
  735. </div>
  736.  
  737. <!-- THIS IS THE END OF TUMBLR -->
  738.  
  739.  
  740.  
  741. <!-- THIS IS THE START OF THE E-MAIL -->
  742.  
  743. <div id="06" class="popup_block">
  744. <div class="emailhead">
  745. <strong><font style="font-size: 18px;line-height:20px; padding-right:5px;letter-spacing: 1px;font-weight:300;font-">
  746. (no subject)
  747. </font><img src="https://i.imgur.com/KLo25ox.png" border="0" style="padding-left: 0px; position: relative; top: 5px;"><img src="https://i.imgur.com/4BsY3P8.png" align="right" border="0"></strong>
  748. <hr>
  749.  
  750. <div class="emaildate">
  751. <div class="dateline">11:41 PM (2 hours ago)</div>
  752. <img src="https://i.imgur.com/PeGxXhC.png" style="float:right;">
  753. </div>
  754.  
  755. <div class="emailsender">
  756. <img src="https://via.placeholder.com/100x100" width="30" align="left">
  757. <div class="sender">
  758. <div class="from">
  759. <B>Name</b> <font color="#7a7a7a">&#60;name@gmail.com&#62;</font>
  760. </div>
  761. <div class="to">
  762. to me <img src="http://i.imgur.com/Kp0b6FA.png" style="padding-left:3px;">
  763. </div>
  764. </div>
  765. </div>
  766. </div>
  767. <hr>
  768. <p><font style="font-weight: 400;"><BR>
  769. <BR><BR>
  770. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at ex enim. Suspendisse faucibus vehicula felis ut posuere. Nunc condimentum in massa in sodales. Praesent varius, tellus et pretium vulputate, tellus odio rhoncus elit, vel ultrices augue sem eu ex. Suspendisse in ante eu est dapibus posuere. Ut at quam condimentum, dapibus lacus in, interdum sem. Vivamus dapibus pulvinar magna at aliquet. Cras vel blandit sapien. Nullam tempus egestas mi, non vestibulum nisl pellentesque et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sem tortor, tempor sit amet tincidunt at, tristique sit amet ligula. Etiam metus mi, consectetur porttitor nunc quis, finibus tincidunt turpis. Sed rutrum, arcu non cursus ornare, mauris dolor convallis risus, vitae vulputate lorem ipsum vitae dolor. Ut non elementum purus. Sed eu ante enim.<BR><BR>
  771.  
  772. Sed vitae dolor rutrum, congue nisi id, vehicula ante. Fusce arcu quam, porttitor nec erat id, vulputate efficitur turpis. Mauris interdum arcu sit amet maximus malesuada. Aliquam vitae fermentum nisl. Proin condimentum lobortis mauris eu posuere. Fusce neque velit, placerat quis libero a, euismod pharetra erat. Cras ullamcorper mollis lectus ut interdum. Fusce condimentum magna eget tempus efficitur. Cras tellus enim, aliquam pulvinar nisi posuere, tincidunt lobortis augue. Praesent ut blandit leo. Pellentesque rhoncus tortor nec justo porta ullamcorper. In varius euismod lobortis. Nam dictum, elit eu gravida ullamcorper, nibh mauris volutpat quam, at luctus velit turpis vitae lacus.<BR><BR>
  773.  
  774. Nullam venenatis pretium imperdiet. Nulla lacinia fringilla venenatis. Pellentesque bibendum est urna, nec aliquam urna volutpat vitae. Maecenas id sagittis diam. Sed ut quam tincidunt, fermentum massa ut, volutpat mauris. Fusce mi eros, suscipit in justo sit amet, commodo iaculis sapien. Nulla congue est a erat convallis, sed tristique elit pretium. Vestibulum euismod lobortis urna, vitae commodo magna cursus quis. Cras ligula augue, blandit gravida dapibus id, porta vitae mauris. Fusce pharetra odio id nibh finibus, non blandit est sollicitudin. Donec fermentum lacus eget mauris tempor, ac semper nisi maximus.<BR>
  775.  
  776. <hr>
  777.  
  778. </div>
  779.  
  780. <!-- THIS IS THE END OF THE E-MAIL -->
  781.  
  782.  
  783.  
  784. <!-- THIS IS THE START OF TWITTER -->
  785.  
  786. <div id="07" class="popup_block">
  787.  
  788. <center>
  789. <table class="tweet" cellspacing="4" cellpadding="9"><tr><td><img src="https://66.media.tumblr.com/babf66e6ff2a7f9a176c81aacfa1c9ec/tumblr_psnm12GDK31w40l7oo5_400.png" style="width:36px;border-radius:100px;margin-right: 7px;" align="left"><font style="color:#1c2022;font-size:14px;font-weight:bold;line-height:16px;">Name Here <img src="http://i.imgur.com/LaB4SRm.png" width="12"></font> <br>
  790. <font style="color:#697882;font-size:14px;line-height:14px;">@username</font> </td> <td width="50"><img src="https://i.imgur.com/UOXKhac.png" width="110" style="float:right; margin-right: -60px;"></td></tr>
  791. <tr><td colspan="10">Short tweet will need margin-right adjustment on follow button<br>
  792. <font style="color:#697882;font-size:14px;line-height:30px;">0:00pm - 00 Mon 2000</font><br>
  793. <img src="https://i.imgur.com/VJmnMCo.png" width="250" style="padding-top:5px;"></td></tr></table>
  794. </center>
  795.  
  796. <br>
  797.  
  798. <center>
  799. <table class="tweet" cellspacing="4" cellpadding="9"><tr><td><img src="https://66.media.tumblr.com/babf66e6ff2a7f9a176c81aacfa1c9ec/tumblr_psnm12GDK31w40l7oo5_400.png" style="width:36px;border-radius:100px;margin-right: 7px;" align="left"><font style="color:#1c2022;font-size:14px;font-weight:bold;line-height:16px;">Name Here</font> <br>
  800. <font style="color:#697882;font-size:14px;line-height:14px;">@username</font> </td> <td width="50" align="right"><img src="https://i.imgur.com/UOXKhac.png" width="110"></td></tr>
  801. <tr><td colspan="10">Tweet here<br>
  802. <img src="https://via.placeholder.com/470x270" width="470" style="border-radius:5px; margin-top:5px;"><br>
  803. <font style="color:#697882;font-size:14px;line-height:30px;">0:00pm - 00 Mon 2000</font><br>
  804. <img src="https://i.imgur.com/VJmnMCo.png" width="250" style="padding-top:5px;"></td></tr></table>
  805. </center>
  806.  
  807. <br>
  808.  
  809. <center>
  810. <table class="tweet" cellspacing="4" cellpadding="9"><tr><td><img src="https://66.media.tumblr.com/babf66e6ff2a7f9a176c81aacfa1c9ec/tumblr_psnm12GDK31w40l7oo5_400.png" style="width:36px;border-radius:100px;margin-right: 7px;" align="left"><font style="color:#1c2022;font-size:14px;font-weight:bold;line-height:16px;">Name Here </font> <br>
  811. <font style="color:#697882;font-size:14px;line-height:14px;">@username</font> </td> <td width="50"><img src="https://i.imgur.com/UOXKhac.png" width="110" style="float:right;"></td></tr>
  812. <tr><td colspan="10">Longer tweet won't need any adjustment to the follow button IDK WHY I AM TOO LAZY TO TRY AND CHANGE IT MORE THAN THAT<br>
  813. <font style="color:#697882;font-size:14px;line-height:30px;">0:00pm - 00 Mon 2000</font><br>
  814. <img src="https://i.imgur.com/VJmnMCo.png" width="250" style="padding-top:5px;"></td></tr></table>
  815. </center>
  816.  
  817. <br>
  818.  
  819. </div>
  820.  
  821. <!-- THIS IS THE END OF TWITTER -->
  822.  
  823.  
  824. </body>
  825. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!