API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 21st, 2019
1,901
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.43 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5.  
  6. <meta name="credit" content="base by weiman, instagram base by minna, cameraroll taken from templatesss and updated with hover by tentacool, everything else and updated to iOS 11 by morley">
  7.  
  8.  
  9. <title>phone</title>
  10. <link rel="shortcut icon" href="https://i.imgur.com/zkgCrD3.png">
  11.  
  12. <link href='https://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
  13. <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  14.  
  15. <style type="text/css">
  16. /* ---- GENERAL ---- */
  17.  
  18. p {
  19. text-indent: 10px;
  20. }
  21.  
  22. body {
  23. background-image: url(http://i.imgur.com/H0Q3hWQ.png);
  24. overflow: hidden;
  25.  
  26. }
  27.  
  28. #container {
  29. width: 450px;
  30. height: 500;
  31. margin: 0 auto;
  32. margin-top: 30px;
  33. background: transparent;
  34. }
  35.  
  36. #s-m-t-tooltip {
  37. max-width:200px;
  38. padding:3px 5px;
  39. margin:5px 0px 0px 5px;
  40. background-color: rgba(250, 250, 250, 0.8);
  41. font-family: helvetica, sans-serif;
  42. font-size:8pt;
  43. font-weight:light;
  44. letter-spacing:+1px;
  45. text-transform:uppercase;
  46. text-align: justify;
  47. color:#000;
  48. z-index:999999999999999999;
  49. -moz-box-shadow: 1px 2px 1px rgba(0,0,0,.1);
  50. -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,.1);
  51. }
  52.  
  53. ::-webkit-scrollbar {
  54. width: 0px;
  55. }
  56.  
  57. ::-webkit-scrollbar-thumb {
  58. background-color: rgba(192, 192, 192, 1);
  59. }
  60.  
  61. html, a, a:hover {
  62. cursor:url(http://i.imgur.com/ONVDMqu.png), default;
  63. }
  64.  
  65. #options {
  66. float: left;
  67. margin-top:150;
  68. height:610;
  69. width:130;
  70. }
  71.  
  72. #telephone {
  73. float: right;
  74. height:610;
  75. overflow: hidden;
  76. width:292;
  77. }
  78.  
  79. .icons {
  80. width:50;
  81. padding:5px;
  82. }
  83.  
  84.  
  85.  
  86. /*
  87. WHITE PHONE - https://i.imgur.com/zWl7dfF.png
  88. BLACK PHONE - https://i.imgur.com/ko1Eftl.png
  89. REPLACE LINK BELOW WITH LINK YOU WANT
  90. */
  91. .phone {
  92. background: url(https://i.imgur.com/zWl7dfF.png) no-repeat;
  93. width: 292;
  94. height: 610;
  95. overflow: hidden;
  96. }
  97.  
  98.  
  99. /*
  100. THIS IS THE INSIDE OF YOUR PHONE SCREEN
  101. THIS CAN BE ANY IMAGE YOU WANT RESIZED TO 256x465
  102. */
  103. #inside {
  104. background: url(https://i.imgur.com/NYPYvrW.jpg) no-repeat;
  105. display: inline-block;
  106. position: absolute;
  107. visibility:visible;
  108. margin-left:18px;
  109. top:101px;
  110. overflow:hidden;
  111. z-index:-2;
  112. width:256px;
  113. height:465px;
  114. }
  115.  
  116. textarea {
  117. outline: none;
  118. resize: none;
  119. }
  120.  
  121. .a, .b, .c, .d, .e, .f, .g, .h {
  122. width: 253;
  123. height: 462;
  124. margin: 0;
  125. padding: 1px;
  126. display: none;
  127. overflow: hidden;
  128. background-color: #000;
  129. margin: 71 0 0 176;
  130. position: fixed;
  131.  
  132. }
  133.  
  134.  
  135. /* ---- VOICEMAIL ---- */
  136. .vmcontent {
  137. width: 256;
  138. height: 345;
  139. overflow: auto;
  140. margin: 0;
  141. padding:2px;
  142. background-color: #fff;
  143. font-family: helvetica, arial, sans serif;
  144. font-size:12px;
  145. line-height:14px;
  146. text-transform:none;
  147. text-align:left;
  148. }
  149.  
  150. .vmheader {
  151. margin: 0;
  152. height: 65;
  153. width: 254;
  154. padding:3px;
  155. background-color: #f2f2f4;
  156. font-family: helvetica, arial, sans serif;
  157. font-size:12px;
  158. font-weight:bold;
  159. text-align: center;
  160. text-transform: none;
  161. border-bottom:1px solid #ccc;
  162. }
  163.  
  164. .vmsender {
  165. padding-right: 5px;
  166. padding-left: 5px;
  167. padding-top: 5px;
  168. height:30;
  169. }
  170.  
  171. .vmfrom {
  172. padding-left:5;
  173. padding-right:5;
  174. font-size:13px;
  175. color: #000;
  176. float: left;
  177. font-weight:bold;
  178. }
  179.  
  180. .vmstats {
  181. padding-left:5;
  182. padding-right:5;
  183. padding-bottom:5;
  184. font-size:12px;
  185. color: #8f8e94;
  186. float: left;
  187. }
  188.  
  189. .vminfo {
  190. float: right;
  191. margin-top:-15px;
  192. }
  193.  
  194. .vmplay {
  195. padding:5px;
  196. height:15;
  197. margin-top:0px;
  198. font-size:11px;
  199. margin-bottom:10px;
  200. color:#8f8e94;
  201. }
  202.  
  203. .vmbuttons {
  204. padding-left:10;
  205. padding-right:15;
  206. font-size:12px;
  207. font-weight: none;
  208. text-align:center;
  209. margin-bottom:10px;
  210. }
  211.  
  212. .vmbreak {
  213. margin-left: auto;
  214. margin-right: auto;
  215. height: 1px;
  216. width: 85%;
  217. background-color: #ececec;
  218. }
  219.  
  220. .vmtranscript {
  221. padding:10px;
  222. padding-top:10px;
  223. color:#8f8e94;
  224. }
  225.  
  226. .vmbottom {
  227. height:36px;
  228. width:256px;
  229. background:#F1F1F3;
  230. padding-top:5px;
  231. border-top:1px solid #ccc;
  232. margin: 0;
  233. }
  234.  
  235. /* ---- NOTES ---- */
  236. .notesheader {
  237. height: 25;
  238. width: 256;
  239. padding-top: 5px;
  240. background-color: #f7f7f7;
  241. font-family: helvetica, arial, sans serif;
  242. font-size:12px;
  243. font-weight:bold;
  244. text-transform:;
  245. color: #e4af0a;
  246. }
  247.  
  248. .notescontent {
  249. width: 234;
  250. height: 407;
  251. padding-left:10px;
  252. padding-right:10px;
  253. overflow: auto;
  254. background-color: #f7f7f7;
  255. font-family: helvetica, arial, sans serif;
  256. color: #454545;
  257. font-size:12px;
  258. font-weight:normal;
  259. line-height:14px;
  260. text-transform:none;
  261. text-align:left;
  262. }
  263.  
  264. .notesbottom {
  265. height:25px;
  266. background:#222326;
  267. text-align:center;
  268. margin:0;
  269. }
  270.  
  271. /* ---- MUSIC (UPDATED 25/07/16) ---- */
  272. .musicheader {
  273. margin: 0;
  274. height: 55;
  275. width: 248px;
  276. padding:3px;
  277. background-color: #181818;
  278. color:#fff;
  279. font-family: arial, roboto;
  280. font-size:12px;
  281. font-weight:bold;
  282. text-align:center;
  283. text-transform: none;
  284. }
  285. .musiccontent {
  286. width: 254;
  287. height: 350px;
  288. overflow: auto;
  289. margin: 0;
  290. padding: 0;
  291. background-color: #181818;
  292. font-family: helvetica, arial, sans serif;
  293. font-size: 14px;
  294. line-height: 14px;
  295. text-transform: none;
  296. text-align: left;
  297. overflow-y: auto;
  298. overflow-x: hidden;
  299.  
  300. }
  301. a {color: #fff; text-decoration: none;
  302. }
  303.  
  304. .musictitle {
  305. padding-left:5;
  306. background-color: #181818;
  307. color: #fff;
  308. font-family: arial;
  309. font-size:13px;
  310. text-transform: none;
  311. }
  312. .musicbottom {
  313. height:55px;
  314. width:248px;
  315. padding:3px;
  316. color: #fff;
  317. font-family:arial;
  318. font-size:12px;
  319. background:#222326;
  320. text-align:center;
  321. border-top:1px solid #888;
  322. margin: 0;
  323. }
  324.  
  325. /* ---- INSTAGRAM (ADDED 25/07/16) ---- */
  326. .instacontent {
  327. width: 258;
  328. height: 400;
  329. overflow: auto;
  330. margin: 0;
  331. padding:2px;
  332. background-color: #fff;
  333. font-family: helvetica, arial, sans serif;
  334. font-size:12px;
  335. line-height:14px;
  336. text-transform:none;
  337. text-align:left;
  338. }
  339.  
  340. .instaheader {
  341. margin: 0;
  342. height: 25;
  343. width: 250;
  344. padding:3px;
  345. background-color: #FAFAFA;
  346. font-family: grand hotel;
  347. font-size:20px;
  348. font-weight:bold;
  349. text-align: center;
  350. text-transform: none;
  351. border-bottom:1px solid #ccc;
  352. }
  353.  
  354. .instauser {
  355. height: 25;
  356. padding-left: 10px;
  357. width: 225;
  358. background-color: #fff;
  359. font-family: roboto;
  360. font-size: 11px;
  361. padding-bottom: 5px;
  362. padding-top: 5px;
  363. }
  364.  
  365. .instapic {
  366. margin: 0;
  367. padding-bottom: 5px;
  368. overflow: none;
  369. }
  370.  
  371. .instabar {
  372. padding-right: 3px;
  373. border-bottom: 1px solid #ccc;
  374. overflow: none;
  375. }
  376.  
  377. .instafriends{
  378. width: 235;
  379. padding-left: 10px;
  380. padding-top: 6px;
  381. font-weight: bold;
  382. text-transform: lowercase;
  383. font-family: roboto;
  384. font-size: 11px;
  385. overflow: none; !important
  386.  
  387. }
  388.  
  389. .instacaption{
  390. width: 235;
  391. padding-left: 10px;
  392. padding-top: 5px;
  393. font-family: roboto;
  394. font-size: 11px;
  395. overflow: none; !important
  396.  
  397. }
  398.  
  399. .instacomment{
  400. width: 235;
  401. padding-left: 10px;
  402. padding-top: 5px;
  403. font-family: roboto;
  404. font-size: 11px;
  405. overflow: none; !important
  406. }
  407.  
  408. .instatime{
  409. width: 235;
  410. padding-left: 10px;
  411. color: #ccc;
  412. font-size: 8px;
  413. font-family: roboto;
  414. overflow: none; !important
  415. }
  416.  
  417. .instafooter {
  418. height:30px;
  419. width:258px;
  420. background:#f7f7f7;
  421. padding-top:0px;
  422. border-top:1px solid #ccc;
  423. margin: 0;
  424. }
  425.  
  426. /* ---- TEXT ---- */
  427. .textcontent {
  428. width: 250;
  429. height: 361;
  430. overflow: auto;
  431. margin: 0;
  432. padding:2px;
  433. background-color: #fff;
  434. font-family: helvetica, arial, sans serif;
  435. font-size:12px;
  436. line-height:14px;
  437. text-transform:none;
  438. text-align:left;
  439. }
  440.  
  441. .textfrom {
  442. margin:10px 20px 10px 10px;
  443. width:80%;
  444. padding-left:4px;
  445. background:url('https://i.imgur.com/bCM6Iww.png')bottom left no-repeat;
  446. }
  447.  
  448. .textfrom2 {
  449. background:#E5E5EA;
  450. padding:5px;
  451. -webkit-border-radius:15px;
  452. border-radius:15px;
  453. }
  454.  
  455. .textto {
  456. margin:10px 10px 10px 40px;
  457. width:80%;
  458. padding-right:4px;
  459. background:url('https://i.imgur.com/TvzLmoA.png')bottom right no-repeat;
  460. }
  461.  
  462. .textto2 {
  463. background:#00A7FF;
  464. color: #ffffff;
  465. padding:5px;
  466. -webkit-border-radius:15px;
  467. border-radius:15px;
  468. }
  469.  
  470. .imgfrom {margin:10px 20px 10px 10px;}
  471.  
  472. .imgto {margin:10px 10px 10px 90px;}
  473.  
  474. .textheader {
  475. margin: 0;
  476. height: 50;
  477. width: 248;
  478. padding:3px;
  479. background-color: #f9f9f9;
  480. font-family: helvetica, arial, sans serif;
  481. font-size:12px;
  482. font-weight:;
  483. text-align:center;
  484. text-transform: none;
  485. border-bottom:1px solid #ccc;
  486. }
  487.  
  488. .textbottom {
  489. height:35px;
  490. width:254px;
  491. background:#fff;
  492. padding-top:5px;
  493. border-top:1px solid #ccc;
  494. margin: 0;
  495. }
  496.  
  497. .textcompose {
  498. font-family: helvetica,arial,sans-serif;
  499. font-size:12px;
  500. line-height:20px;
  501. width:165px;
  502. height:25px;
  503. margin-left:5px;
  504. padding-left:5px;
  505. border:none;
  506. -webkit-border-radius:7px;
  507. border-radius:10px;
  508. -webkit-box-shadow:inset 0 0 3px 1px #bbb;
  509. box-shadow:inset 0 0 3px 1px #bbb;
  510. }
  511.  
  512. .textbutton {
  513. float:left;
  514. width:45px;
  515. background:;
  516. text-align:center;
  517. font-size: 11px;
  518. margin-left:10px;
  519. margin-right:10px;
  520. margin-top:5px;
  521. height:25px;
  522. line-height:25px;
  523. -webkit-border-radius:5px;
  524. border-radius:5px;
  525. font-weight:bold;
  526. letter-spacing:1px;
  527. color:#fff;
  528. text-shadow:1px 1px 0 #444;
  529. font-family: helvetica, arial, sans serif;
  530. }
  531.  
  532. .img-circle {
  533. border-radius: 50%;
  534. }
  535.  
  536. /* ---- CAMERAROLL ---- */
  537.  
  538. .cameraheader {
  539. margin: 0;
  540. height: 35px;
  541. width: 252px;
  542. padding:3px;
  543. background-color: #f2f2f4;
  544. font-family: helvetica neue, roboto;
  545. font-size:12px;
  546. font-weight:bold;
  547. text-align:center;
  548. text-transform: none;
  549. border-bottom: 1px solid #ccc;
  550. }
  551.  
  552. .cameracontent {
  553. width: 252px;
  554. height: 378px;
  555. overflow: auto;
  556. overflow-x: hidden;
  557. margin: 0;
  558. padding: 1px;
  559. padding-top: 6px;
  560. background-color: #fff;
  561. text-transform:none;
  562. font-family: helvetica neue, roboto;
  563. font-size: 12px;
  564. text-align:left;
  565. position: relative;
  566. }
  567.  
  568. .camerabottom {
  569. margin: 0;
  570. height: 30px;
  571. width: 252px;
  572. padding:3px;
  573. background-color: #f2f2f4;
  574. font-family: helvetica neue, roboto;
  575. font-size:9px;
  576. font-weight:normal;
  577. text-align:left;
  578. text-transform: none;
  579. color: #ccc;
  580. border-top: 1px solid #ccc;
  581. }
  582.  
  583. .zoom {
  584. transition: transform .6s; /* Animation */
  585. width: 60px;
  586. height: 60px;
  587. margin: 0 auto;
  588. }
  589.  
  590. .zoom:hover {
  591. transform: scale(2.0); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  592. }
  593.  
  594. </style>
  595.  
  596.  
  597. <!-- THIS IS THE SCRIPT FOR A FANCY HOVER -->
  598. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  599. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  600. <script>
  601. (function($){
  602. $(document).ready(function(){
  603. $("a[title]").style_my_tooltips({
  604. tip_follows_cursor:true,
  605. tip_delay_time:90,
  606. tip_fade_speed:600,
  607. attribute:"title"
  608. });
  609. });
  610. })(jQuery);
  611. </script>
  612.  
  613. <!-- THIS IS THE SCRIPT FOR YOUR BOXES APPEARING AND HIDING; MAKE SURE TO EDIT THIS ACCORDING TO HOW MANY LINKS/BOXES YOU NEED -->
  614. <script src="http://code.jquery.com/jquery-1.10.0.min.js">
  615. </script>
  616. <script>
  617. $(document).ready(function(){
  618. $(".one").click(function(){
  619. $(".a").toggle();
  620. $(".b,.c,.d,.e,.f,.g,.h").hide();
  621. });
  622. $(".two").click(function(){
  623. $(".b").toggle();
  624. $(".a,.c,.d,.e,.f,.g,.h").hide();
  625. });
  626. $(".three").click(function(){
  627. $(".c").toggle();
  628. $(".d,.e,.f,.g,.h,.a,.b").hide();
  629. });
  630. $(".four").click(function(){
  631. $(".d").toggle();
  632. $(".e,.f,.g,.h,.a,.b,.c").hide();
  633. });
  634. $(".five").click(function(){
  635. $(".e").toggle();
  636. $(".f,.g,.h,.a,.b,.c,.d").hide();
  637. });
  638. $(".six").click(function(){
  639. $(".f").toggle();
  640. $(".e,.d,.g,.h,.a,.b,.c").hide();
  641. });
  642. $(".seven").click(function(){
  643. $(".g").toggle();
  644. $(".e,.d,.f,.h,.a,.b,.c").hide();
  645. });
  646. $(".eight").click(function(){
  647. $(".h").toggle();
  648. $(".e,.f,.g,.d,.a,.b,.c").hide();
  649. });
  650. });
  651. </script>
  652. </head>
  653.  
  654. <body>
  655. <div id="container">
  656. <div id="options">
  657.  
  658. <!--
  659. THESE ARE YOUR SIDE ICONS TO ADD MORE JUST C/P
  660. MORE LINES AND CHANGE THE NUMBER CLASSES UP TO
  661. EIGHT WHEN C/PING THE DIV CLASS INFO BELOW USE
  662. THE CORRESPONDING LETTER ONE-A TWO-B THREE-C ETC
  663. -->
  664.  
  665. <a href="#" class="one" title="notes"><img src="https://i.imgur.com/G8nnT7X.png" class="icons"></a>
  666. <a href="#" class="two" title="voicemail"><img src="https://i.imgur.com/NIZfEAi.png" class="icons"></a>
  667. <a href="#" class="three" title="text messages"><img src="https://i.imgur.com/k66T2ZW.png" class="icons"></a>
  668. <a href="#" class="four" title="instagram"><img src="http://i.imgur.com/HhJIwpb.png" class="icons"></a>
  669. <a href="#" class="five" title="spotify"><img src="http://i.imgur.com/cqcQEeG.png" class="icons"></a>
  670. <a href="#" class="six" title="camera roll"><img src="https://i.imgur.com/hUThws9.png" class="icons"></a>
  671. <BR>
  672. </div>
  673.  
  674. <div id="telephone">
  675. <div class="phone"></div>
  676. <div id="inside"></div>
  677. </div>
  678.  
  679. <!--SECTION-->
  680. <div class="a">
  681. <div class="notesheader">
  682. <div style="float:left; padding-left: 5px;"><img src="http://i.imgur.com/BydvA4W.png" width="10" align="left">Notes</div>
  683. <div style="float:right;"><img src="http://i.imgur.com/rbuquCf.png" width="40" align="right" style="padding-right:15px;"></div></div>
  684. <div class="notescontent"><center><small><font color=#aeaeae>January 24, 2018 at 7:17 PM</font></small></center><br>
  685. <b>NOTES TITLE</b><br><br>
  686. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis nibh ultrices orci fermentum fringilla. In eu est sit amet ipsum interdum condimentum ac sed ligula. Sed lobortis lobortis sem, ac viverra est vehicula a. Fusce vel nisl augue. Nulla facilisi. Vivamus tempus odio est, ac laoreet nibh pellentesque nec. Maecenas a vulputate erat, non consequat mi. Integer at fermentum diam. Praesent vestibulum libero nec sodales vehicula. Cras tincidunt scelerisque dolor a consequat.
  687.  
  688. <p>Vivamus consequat facilisis leo. Quisque vel felis elementum, euismod ante quis, lacinia orci. Nulla eros neque, venenatis vitae dui quis, hendrerit condimentum eros. In hac habitasse platea dictumst. Aliquam dignissim dapibus vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus lacus, lacinia eu sollicitudin in, iaculis non dui.
  689.  
  690. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sollicitudin fringilla leo ac sagittis. Curabitur quis purus eu turpis accumsan porttitor quis vitae tortor. Aliquam volutpat magna et libero imperdiet feugiat. Mauris nibh ipsum, ornare a cursus eget, aliquam quis enim. Curabitur ut tincidunt diam, non blandit ipsum. Cras id tempus nulla. Mauris id imperdiet velit, ac imperdiet est.
  691. </div>
  692. <div class="notesbottom"><img src="https://i.imgur.com/zE93rqN.png" width="256"></div>
  693. </div>
  694. <!--/SECTION-->
  695.  
  696. <!--SECTION-->
  697. <div class="b">
  698. <div class="vmheader">
  699. <div style="float:left; margin-left:10px;">
  700. <font style="color:#ccc; font-weight:normal;">Greeting</font>
  701. </div>
  702. <div style="float:right; margin-right: 10px;"><font style="color:#ccc; font-weight:normal;">Edit</font>
  703. </div>
  704. <br><br>
  705. <div style="float:left; margin-left:10px;">
  706. <font style="font-size:25px;">Voicemail</font></div>
  707. </div>
  708. <div class="vmcontent">
  709. <div class="vmsender">
  710. <div class="vmfrom">Caller Name</div>
  711. <br>
  712. <div class="vmstats">home
  713. <br>
  714. January 25, 2018 at 11:35 PM
  715. </div>
  716.  
  717. <div class="vminfo"><img src="https://i.imgur.com/jeCINSJ.png" width=45></div>
  718. </div>
  719. <br>
  720. <div class="vmtranscript">
  721. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis nibh ultrices orci fermentum fringilla. In eu est sit amet ipsum interdum condimentum ac sed ligula. Sed lobortis lobortis sem, ac viverra est vehicula a. Fusce vel nisl augue. Nulla facilisi. Vivamus tempus odio est, ac laoreet nibh pellentesque nec. Maecenas a vulputate erat, non consequat mi. Integer at fermentum diam.
  722. </div>
  723.  
  724. <div class="vmplay">
  725. <img src="https://i.imgur.com/vVeCKU7.png" width="245">
  726. <div style="float:left; margin-top:-10px; margin-left:20px; position: absolute; z-index: 1;">0:00</div><div style="float:right; margin-top:-10px; margin-left:210px; position:absolute; z-index:2;">-0:22</div>
  727. </div>
  728. <div class="vmbuttons">
  729. <div style="float:left;"><font style="color:#007aff;">Speaker</font></div><font style="color:#007aff;">Call Back</font><div style="float:right;"><font style="color:#ff3a31;">Delete</font></div>
  730. </div>
  731. <div class="vmbreak"></div>
  732. </div>
  733.  
  734. <div class="vmbottom"><img src="https://i.imgur.com/EW7yRj3.png" width=256></div>
  735.  
  736. </div>
  737. <!--/SECTION-->
  738.  
  739. <!--SECTION-->
  740. <div class="c">
  741. <div class="textheader">
  742.  
  743. <div style="float:left; margin-right:10px;">
  744. <img src="https://i.imgur.com/uhIJvnw.png" align=left></div>
  745. <img class="img-circle" src="https://i.imgur.com/dQ6Hqqf.jpg" width="30">
  746. <div style="float:right;"><img src="https://i.imgur.com/T2hdNX4.png" align=right></div>
  747. <div style="center; margin-top:2px;">Contact Name</div>
  748. </div>
  749.  
  750. <div class="textcontent">
  751. <div class="textfrom"><div class="textfrom2">
  752. Lorem ipsum dolor sit amet
  753. </div></div>
  754.  
  755. <div class="imgfrom">
  756. <img src="https://i.imgur.com/nfsb9nX.jpg" width="150">
  757. </div>
  758.  
  759. <div class="textto"><div class="textto2">
  760. consectetur adipiscing elit.
  761. </div></div>
  762.  
  763. <div class="imgto">
  764. <img src="https://i.imgur.com/nfsb9nX.jpg" width="150">
  765. </div>
  766.  
  767.  
  768. <div class="textto"><div class="textto2">
  769. Morbi eu eros pellentesque, porttitor enim eu, convallis ex.
  770. </div></div>
  771.  
  772. <div class="textfrom"><div class="textfrom2">
  773. Vivamus lectus lorem
  774. </div></div>
  775.  
  776. <div class="textto"><div class="textto2">
  777. facilisis vel sollicitudin ac, lacinia molestie nulla
  778. </div></div>
  779.  
  780. <div class="textto"><div class="textto2">
  781. Pellentesque aliquet pretium ligula, eget pulvinar dui gravida id.
  782. </div></div>
  783.  
  784. <div class="textfrom"><div class="textfrom2">
  785. Aenean pulvinar consectetur ex a cursus. Suspendisse tellus mi, vestibulum a quam id, lobortis elementum felis.
  786. </div></div>
  787.  
  788. <div class="textfrom"><div class="textfrom2">
  789. Maecenas consequat venenatis mollis.
  790. </div></div>
  791.  
  792. </div>
  793. <div class="textbottom">
  794. <textarea placeholder="iMessage" class="textcompose"></textarea><div class="textbutton"><img src="https://i.imgur.com/VQqiBgI.png"></div>
  795. </div></div>
  796. <!--/SECTION-->
  797.  
  798. <!--SECTION-->
  799. <div class="d">
  800. <div class="instaheader">
  801. <div style="float:left; margin-right:-5px;">
  802. <img src="https://i.imgur.com/JytozMg.png" height="15" style="padding-top: 6px; padding-left: 5px;" align="left">
  803. </div>
  804. <font style="color:#000;">Instagram</font>
  805. <div style="float:right;"><img src="https://i.imgur.com/qACjKUj.png" height="15" style="padding-top: 6px; padding-right: 5px;" align="right">
  806. </div>
  807. </div>
  808. <div class="instacontent">
  809.  
  810. <!--instagram post-->
  811. <div class="instauser"><img src="https://i.imgur.com/HZRo2Rv.jpg" height="25" style="-webkit-border-radius:100px;" align="left"><div style="padding-left:8px; padding-top:7px;"><b>britneyspears</b></div></div>
  812. <div class="instapic"><img src="https://i.imgur.com/MIGqjDy.jpg" width="250"></div>
  813. <div class="instabar"><img src="http://i.imgur.com/juQ8vK8.png" height="18" style="padding-bottom: 7px;"></div>
  814. <div class="instafriends">liked by <b>username, username, username</b> and 12 others</div>
  815. <div class="instacaption"><b>britneyspears</b> caption here <font color="#125688">#hashtag #hashtag</font></div>
  816. <div class="instacomment"><font color="#ccc">View all 9 comments</font><br>
  817. <b>username</b> comment <br>
  818. <b>username</b> comment<br>
  819. </div>
  820. <div class="instatime">3 MINUTES AGO</div>
  821. <!--/instagram post-->
  822.  
  823. <!--instagram post-->
  824. <div class="instauser"><img src="https://i.imgur.com/2XXq7bI.jpg" height="25" style="-webkit-border-radius:100px;" align="left"><div style="padding-left:8px; padding-top:7px;"><b>xtina</b></div></div>
  825. <div class="instapic"><img src="https://i.imgur.com/lAcPSYF.jpg" width="250"></div>
  826. <div class="instabar"><img src="http://i.imgur.com/SJOys5Y.png" height="18" style="padding-bottom: 7px;"></div>
  827. <div class="instafriends">224 likes</div>
  828. <div class="instacaption"><b>xtina</b> caption here</div>
  829. <div class="instacomment"> <font color="#ccc">View all 32 comments</font><br>
  830. <b>username</b> comment<br>
  831. <b>username</b> <b><font color="#125688">@tag</font></b> comment <br>
  832. </div>
  833. <div class="instatime">2 HOURS AGO</div>
  834. <!--/instagram post-->
  835.  
  836.  
  837. </div>
  838. <div class="instafooter"><img src="http://i.imgur.com/p2JoN5g.png" height="30" style="padding-bottom: 11px;"></div>
  839. </div>
  840. <!--/SECTION-->
  841.  
  842. <!--SECTION-->
  843. <div class="e">
  844. <div class="musicheader">
  845. <div style="float:left; margin-right:-5px;">
  846. <img src="https://i.imgur.com/7x9nadi.png" width=10 align=left style="padding-top: 11px;">
  847. </div>
  848. playlist title
  849. <div style="float:right;"><img src="http://i.imgur.com/8vV6Q4J.png?1" align=right style="padding-top: 11px; padding-right: 5px;"></div>
  850. <br>
  851. <center><a href="YOUTUBE PLAYLIST LINK IF YOU WANT" target="_blank"><img src="http://i.imgur.com/VoKkbzm.png" width="190"></a></center>
  852. </div>
  853. <div class="musiccontent">
  854. <div class="musictitle">
  855.  
  856. <a href="YOUTUBE OR SPOTIFY LINK" target="_blank">Song Title</a><br>
  857. <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>
  858.  
  859. <a href="YOUTUBE OR SPOTIFY LINK" target="_blank">Song Title (feat. Artist)</a><br>
  860. <img src="http://i.imgur.com/vQ2CkX0.png" width="13"><small><font color="#888"> Artist, Artist • Album Title Too Long...</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>
  861.  
  862. <a href="YOUTUBE OR SPOTIFY LINK" target="_blank">Song Title</a><br>
  863. <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>
  864.  
  865. <a href="YOUTUBE OR SPOTIFY LINK" target="_blank">Song Title</a><br>
  866. <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>
  867.  
  868. <a href="YOUTUBE OR SPOTIFY LINK" target="_blank">Song Title</a><br>
  869. <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>
  870.  
  871. <a href="YOUTUBE OR SPOTIFY LINK" target="_blank">Song Title</a><br>
  872. <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>
  873.  
  874. <a href="YOUTUBE OR SPOTIFY LINK" target="_blank">Song Title</a><br>
  875. <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>
  876.  
  877. <a href="YOUTUBE OR SPOTIFY LINK" target="_blank">Song Title</a><br>
  878. <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>
  879.  
  880. <a href="YOUTUBE OR SPOTIFY LINK" target="_blank">Song Title</a><br>
  881. <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>
  882.  
  883.  
  884. </div></div>
  885. <div class="musicbottom">
  886. <div style="float:left; margin-right:-5px;"><img src="http://i.imgur.com/3LNstzo.png" width="15" align="left" style="padding-top:5px;"></div>
  887. <center>song title • <font color="#888">artist</font>
  888. <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>
  889. <img src="http://i.imgur.com/MxAd2eM.png" width="248">
  890. </center></div>
  891. </div>
  892. <!--/SECTION-->
  893.  
  894. <!--SECTION-->
  895. <div class="f">
  896. <div class="cameraheader">
  897. <div style="float:left; margin-right:-5px;">
  898. <img src="http://i.imgur.com/nj9rM4t.png" width="11" align="left" style="margin-top: 11px;"> <font style="color:#0072ff; font-weight:normal; position: relative; top: 12px;">Albums</font>
  899. </div>
  900.  
  901. <font style="font-family: roboto;font-size: 12px;font-weight: bolder;margin-left: 2px;position: relative;top: 11px;">All Photos</font>
  902.  
  903. <div style="float:right; margin-right: 5px; position: relative;top: 12px; padding-right:10px;">
  904. <font style="color:#0072ff; font-weight:normal;">Select</font>
  905. </div>
  906. </div>
  907.  
  908. <div class="cameracontent">
  909.  
  910. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  911. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  912. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  913. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  914. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  915. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  916. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  917. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  918. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  919. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  920. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  921. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  922. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  923. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  924. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  925. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  926. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  927. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  928. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  929. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  930. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  931. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  932. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  933. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  934. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  935. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  936. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  937. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  938. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  939. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  940. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  941. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  942. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  943. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  944. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  945. <img src="https://i.imgur.com/nfsb9nX.jpg" class="zoom">
  946.  
  947. </div>
  948. <div class="camerabottom">
  949. <img src="https://i.imgur.com/lWoMU1j.png">
  950. </div>
  951. </div>
  952.  
  953. <!--/SECTION-->
  954.  
  955.  
  956.  
  957. </div>
  958. </body>
  959. </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!