API tools faq
paste
Advertisement
vcnillacodes

TANGERINE / FRVDDIEMERCURY & STEVENHYD

vcnillacodes
Jan 26th, 2019
3,355
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.18 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <!----- TANGERINE / FRVDDIEMERCURY & STEVENHYD ----->
  5.  
  6. <title>title goes here !</title>
  7. <link rel="shortcut icon" href="http://i.imgur.com/4IoPVYC.png"><!--- copy your blog icon here --->
  8.  
  9.  
  10. <!-- SCRIPTS -->
  11. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  12. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
  13. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  14.  
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  16. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  17.  
  18.  
  19. <script>
  20. (function($){
  21. $(document).ready(function() {
  22. $("a[title]").style_my_tooltips({
  23. tip_follows_cursor:true,
  24. tip_delay_time:20,
  25. tip_fade_speed:200,
  26. attribute:"title"
  27. });
  28. });
  29. })(jQuery);
  30. </script>
  31.  
  32.  
  33.  
  34. <script>
  35. function openCity(evt, cityName) {
  36. var i, tabcontent, tablinks;
  37. tabcontent = document.getElementsByClassName("tabcontent");
  38. for (i = 0; i < tabcontent.length; i++) {
  39. tabcontent[i].style.display = "none";
  40. }
  41. tablinks = document.getElementsByClassName("tablinks");
  42. for (i = 0; i < tablinks.length; i++) {
  43. tablinks[i].className = tablinks[i].className.replace(" active", "");
  44. }
  45. document.getElementById(cityName).style.display = "block";
  46. evt.currentTarget.className += " active";
  47. }
  48. </script>
  49.  
  50. <script>
  51. $.fn.strech_text = function(){
  52. var elmt = jQuery(this),
  53. cont_width = elmt.width();
  54.  
  55. if(jQuery(this).find('.stretch_it').length > 0){
  56. var txt = jQuery(this).find('.stretch_it').html();
  57. jQuery(this).html(txt);
  58. }else{
  59. var txt = elmt.html();
  60. }
  61.  
  62. var one_line = jQuery('<span class="stretch_it">' + txt + '</span>'),
  63. nb_char = elmt.text().length,
  64. spacing = cont_width/nb_char,
  65. txt_width;
  66.  
  67. elmt.html(one_line);
  68. txt_width = one_line.width();
  69.  
  70. if (txt_width < cont_width){
  71. var char_width = txt_width/nb_char,
  72. ltr_spacing = spacing - char_width + (spacing - char_width)/nb_char ;
  73.  
  74. one_line.css({'letter-spacing': ltr_spacing});
  75. } else {
  76. one_line.contents().unwrap();
  77. elmt.addClass('justify');
  78. }
  79. };
  80.  
  81.  
  82. $(document).ready(function () {
  83. $('.stretch').each(function(){
  84. $(this).strech_text();
  85. });
  86. });
  87.  
  88. jQuery(window).resize(function(){
  89. jQuery('.stretch').each(function(){
  90. jQuery(this).strech_text();
  91. });
  92. });
  93. </script>
  94.  
  95.  
  96. <link href="https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800|Nunito+Sans:300,400,700,800|Karla:400,700|Muli:300,400,600,700.800" rel="stylesheet">
  97.  
  98.  
  99. </head>
  100. <style type="text/css">
  101.  
  102.  
  103. /*---------------SCROLLBAR--------------*/
  104. ::-webkit-scrollbar {width:0px; height: 4px;}
  105. ::-webkit-scrollbar-thumb { background-color: #b2a9a7;}
  106.  
  107.  
  108.  
  109. /*-----------------TOOLTIPS----------------*/
  110. #s-m-t-tooltip {
  111. max-width:300px;
  112. border-radius: 0px;
  113. padding:6px;
  114. padding-left:10px;
  115. padding-right:10px;
  116. margin:25px 25px 5px 0px;
  117. font-family:'nunito sans';
  118. background:#4d4d4d; /* tooltips background color */
  119. color:#fff; /* tooltips text color */
  120. border-radius:3px;
  121. z-index:99999;
  122. font-size:8px;
  123. text-transform:uppercase;
  124. letter-spacing:2px;
  125. font-weight:800;
  126. }
  127.  
  128.  
  129.  
  130. /*-----------------BASIC BODY CODING-------------*/
  131. body {
  132. color:#5d5d5d; /* body font color */
  133. background-color:#e3e3e3; /* background color d1d1cc*/
  134. text-align:justify;
  135. font-family:'nunito sans';
  136. font-size:10px;
  137. letter-spacing:1px;
  138. -moz-osx-font-smoothing:grayscale;
  139. -webkit-font-smoothing:antialiased;
  140. font-smoothing:antialiased;
  141. }
  142.  
  143. .vcnilla {
  144. width:640px;
  145. height:450px;
  146. position: absolute;
  147. top:0;
  148. bottom:0px;
  149. left:0;
  150. right:0;
  151. margin:auto;
  152. background:#f1f1f1; /* container background color */
  153. text-align:justify;
  154. border-radius:7px;
  155. }
  156.  
  157.  
  158. /*------------LINKS & FONT STUFF-----------*/
  159. a:link, a:active, a:visited { color: #aaa; text-decoration:none; }
  160. a:hover { color:#aaa; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;}
  161.  
  162.  
  163. /*------------------CREDIT-----------------*/
  164. #credit i {
  165. float:left;
  166. background-color:#a8baae; /* links bg color aka the accent color */
  167. margin-right:10px;
  168. width:15px;
  169. height:15px;
  170. padding:8px;
  171. border-radius:8px;
  172. text-align:center;
  173. text-transform:uppercase;
  174. font-weight:bold;
  175. letter-spacing:1px;
  176. font-size:15px;
  177. position:absolute;
  178. left:10px;
  179. bottom:10px;
  180. }
  181.  
  182. #credit a {
  183. color:#fff;
  184. }
  185.  
  186.  
  187.  
  188. /*-----------TAB LINKS----------*/
  189. .tab {
  190. position:absolute;
  191. top:-30px;
  192. }
  193.  
  194. .tab button {
  195. background:#fff;
  196. padding:none;
  197. border: none;
  198. outline: none;
  199. cursor: pointer;
  200. transition: 0.3s;
  201. width:110px;
  202. height:50px;
  203. font-family:'nunito sans';
  204. color:#8d8d8d;
  205. border-radius:6px;
  206. text-transform:uppercase;
  207. font-weight:800;
  208. letter-spacing:2px;
  209. font-size:8px;
  210. }
  211.  
  212. /* Change background color of buttons on hover */
  213. .tab button:hover {
  214. background-color: #f5f5f5;
  215. }
  216.  
  217. /* Create an active/current tablink class */
  218. .tab button.active {
  219. background-color:#f1f1f1;
  220. }
  221.  
  222. /* Style the tab content */
  223. .tabcontent {
  224. display:none;
  225. padding:0px;
  226. border-top: none;
  227. animation: fadeEffect 0.5s;
  228. width:340px;
  229. height:430px;
  230. border-radius:7px;
  231. position:absolute;
  232. bottom:-30px;
  233. left:30px;
  234. background:#fff;
  235. transform:scale(1);
  236. overflow:hidden;
  237. }
  238.  
  239. /* Go from zero to full opacity */
  240. @keyframes fadeEffect {
  241. from {opacity: 0.6; transform:scale(0.7); }
  242. to {opacity: 1; transform:scale(1); }
  243. }
  244.  
  245.  
  246.  
  247. /*---------------SIDEBAR--------------*/
  248. #sidebar {
  249. width:265px;
  250. height:145px;
  251. background:#fcd6cc; /* sidebar background color */
  252. position:absolute;
  253. right:0px;
  254. top:76px;
  255. overflow:auto;
  256. padding-left:375px;
  257. }
  258.  
  259. #sidebar li {
  260. margin-left:15px;
  261. margin-top:15px;
  262. background:#fff;
  263. border-radius:7px;
  264. width:110px;
  265. height:50px;
  266. float:left;
  267. list-style-type:none;
  268. border-radius:7px;
  269. }
  270.  
  271.  
  272. /*------------------NAME------------------*/
  273. #name {
  274. width:205px;
  275. text-align:center;
  276. position:absolute;
  277. top:235px;
  278. right:30px;
  279. z-index:999;
  280. font-size:14px;
  281. font-family:montserrat;
  282. text-transform:uppercase;
  283. font-weight:700;
  284. }
  285.  
  286. .textbox {
  287. margin:10px;
  288. margin-top:25px;
  289. margin-right:15px;
  290. text-align:justify;
  291. font-family:'nunito sans';
  292. text-transform:uppercase;
  293. font-weight:800;
  294. letter-spacing:2px;
  295. font-size:8px;
  296. line-height:14px;
  297. height:128px;
  298. overflow:auto;
  299. }
  300.  
  301.  
  302. /*---------------QUOTE----------------*/
  303. #quote {
  304. position:absolute;
  305. width:590px;
  306. top:0px;
  307. left:0px;
  308. color:#fff;
  309. background:#edbd8d; /* top quote background color */
  310. text-transform:uppercase;
  311. font-weight:800;
  312. letter-spacing:2px;
  313. font-size:8px;
  314. padding:20px;
  315. padding-left:30px;
  316. padding-bottom:45px;
  317. border-top-left-radius:7px;
  318. border-top-right-radius:7px;
  319. }
  320.  
  321.  
  322. /*----------------------TWITTER TAB----------------------*/
  323. .twitheader {
  324. position:absolute;
  325. top:0px;
  326. left:0px;
  327. width:650px;
  328. height:90px;
  329. }
  330.  
  331. .twitheader img {
  332. width:340px;
  333. height:90px;
  334. }
  335.  
  336. .twiticon {
  337. position:absolute;
  338. top:55px;
  339. left:20px;
  340. }
  341.  
  342. .twiticon img {
  343. width:60px;
  344. height:60px;
  345. border-radius:100%;
  346. border:4px solid #fff;
  347. }
  348.  
  349. .twitterstats {
  350. padding:10px;
  351. position:absolute;
  352. width:435px;
  353. top:150px;
  354. left:10px;
  355. }
  356.  
  357. .twitterstats li {
  358. width:99px;
  359. float:left;
  360. text-align:left;
  361. list-style-type:none;
  362. text-transform:uppercase;
  363. letter-spacing:2px;
  364. text-align:left;
  365. font-weight:700;
  366. font-size:8px;
  367. text-align:center;
  368. }
  369.  
  370. .twitterstats li number {
  371. font-size:11px;
  372. font-weight:800;
  373. color:#f8c9bd;
  374. }
  375.  
  376. .twitsidebar {
  377. position:absolute;
  378. top:95px;
  379. left:20px;
  380. width:300px;
  381. text-align:left;
  382. }
  383.  
  384. .twitsidebar username {
  385. font-size:9px;
  386. font-weight:800;
  387. color:#e7a767; /* twitter username color */
  388. text-transform:uppercase;
  389. letter-spacing:3px;
  390. margin-left:80px;
  391. line-height:25px;
  392. }
  393.  
  394. .tweetscontainer {
  395. position:absolute;
  396. left:0px;
  397. bottom:0px;
  398. width:340px;
  399. height:225px;
  400. overflow:auto;
  401. }
  402.  
  403. .atweet {
  404. border:1px solid #e9e9e9;
  405. margin:0px 20px 20px 20px;
  406. width:300px;
  407. border-radius:5px;
  408. }
  409.  
  410. .atweetusername {
  411. position:relative;
  412. width:270px;
  413. padding:15px;
  414. text-align:left;
  415. text-transform:uppercase;
  416. letter-spacing:2px;
  417. text-align:left;
  418. font-weight:800;
  419. font-size:9px;
  420. }
  421.  
  422. .atweetusername timeago {
  423. float:right;
  424. }
  425.  
  426. .atweetcontent {
  427. letter-spacing:1px;
  428. text-align:justify;
  429. margin-left:15px;
  430. margin-right:15px;
  431. padding-bottom:10px;
  432. }
  433.  
  434. .tweetstats {
  435. position:relative;
  436. text-align:left;
  437. color:#e7a767; /* twitter retweets & likes text color */
  438. font-size:9px;
  439. text-transform:uppercase;
  440. letter-spacing:2px;
  441. font-weight:800;
  442. padding-bottom:15px;
  443. margin-left:15px;
  444. }
  445.  
  446. .tweetstats i {
  447. font-size:11px;
  448. }
  449.  
  450.  
  451. /*-------------GOOGLE TAB-------------*/
  452. .googletopbar {
  453. background:#f2f2f2;
  454. padding:15px;
  455. }
  456.  
  457. .searchbar {
  458. background:#fff;
  459. border-radius:14px;
  460. padding:5px;
  461. padding-left:10px;
  462. }
  463.  
  464. .googlesearches {
  465. margin:15px;
  466. font-size:8px;
  467. text-transform:uppercase;
  468. letter-spacing:2px;
  469. font-weight:800;
  470. }
  471. .googlesearches time {
  472. float:right;
  473. }
  474.  
  475. .googlesearches li {
  476. list-style-type:none;
  477. margin-top:18px;
  478. cursor:pointer;
  479. color:#9d9d9d;
  480. }
  481.  
  482. .bookmarks {
  483. margin:15px;
  484. margin-top:20px;
  485. font-size:8px;
  486. text-transform:uppercase;
  487. letter-spacing:2px;
  488. font-weight:800;
  489. }
  490.  
  491. .bookmarks li {
  492. list-style-type:none;
  493. margin-top:18px;
  494. cursor:pointer;
  495. }
  496.  
  497. .bookmarks li letter {
  498. background:#fed8b1;
  499. border-radius:4px;
  500. font-size:11px;
  501. width:11px;
  502. height:11px;
  503. padding:6px 9px 6px 9px;
  504. margin-right:5px;
  505. color:#5d5d5d;
  506. }
  507.  
  508. .bookmarks li:hover, .googlesearches li:hover {
  509. color:#9d9d9d;
  510. }
  511.  
  512. .googleaccount {
  513. position:absolute;
  514. bottom:0px;
  515. background:#fcd6cc;
  516. padding:15px;
  517. width:310px;
  518. height:80px;
  519. display:table;
  520. }
  521.  
  522. .gaccicon {
  523. font-weight:800;
  524. font-family:'montserrat';
  525. font-size:25px;
  526. width:30px;
  527. height:30px;
  528. padding:15px;
  529. text-align:center;
  530. background:#fff;
  531. border-radius:100%;
  532. margin-top:10px;
  533. margin-left:10px;
  534. }
  535.  
  536. .gaccinfo {
  537. width:200px;
  538. font-size:8px;
  539. text-transform:uppercase;
  540. letter-spacing:2px;
  541. font-weight:700;
  542. position:absolute;
  543. left:110px;
  544. top:25px;
  545. display: table-cell;
  546. vertical-align: middle;
  547. }
  548.  
  549. .gaccinfo b {
  550. font-weight:800;
  551. }
  552.  
  553. .gaccinfo p {
  554. cursor:pointer;
  555. font-weight:800;
  556. }
  557.  
  558.  
  559. /*---------- INSTAGRAM ----------*/
  560. .postscontainer {
  561. position:absolute;
  562. left:0px;
  563. bottom:0px;
  564. width:340px;
  565. height:410px;
  566. overflow:auto;
  567. }
  568.  
  569. .apost {
  570. border:1px solid #e9e9e9;
  571. margin:0px 20px 20px 20px;
  572. width:300px;
  573. height:380px;
  574. border-radius:5px;
  575. }
  576.  
  577. .iggusername {
  578. position:relative;
  579. width:270px;
  580. padding:15px;
  581. text-align:left;
  582. text-transform:uppercase;
  583. letter-spacing:2px;
  584. text-align:left;
  585. font-weight:800;
  586. font-size:9px;
  587. }
  588.  
  589. .iggusername timeago {
  590. float:right;
  591. }
  592.  
  593. .igcontent {
  594. letter-spacing:1px;
  595. text-align:justify;
  596. margin-left:0px;
  597. margin-right:15px;
  598. padding-bottom:10px;
  599. }
  600.  
  601. .poststats {
  602. position:relative;
  603. text-align:left;
  604. color:#e7a767; /* insta interaction tools color */
  605. font-size:11px;
  606. text-transform:uppercase;
  607. letter-spacing:2px;
  608. font-weight:800;
  609. padding-bottom:15px;
  610. margin-left:15px;
  611. }
  612.  
  613. .poststats i {
  614. font-size:14px;
  615. }
  616.  
  617. .postcaption {
  618. position:relative;
  619. text-align:left;
  620. font-size:8px;
  621. text-transform:uppercase;
  622. letter-spacing:2px;
  623. font-weight:800;
  624. padding-bottom:15px;
  625. margin-left:15px;
  626. }
  627.  
  628. .postcaption b {
  629. font-size:8px;
  630. color:#e7a767; /* insta user tools color */
  631. }
  632.  
  633.  
  634. /*--------------SPOTIFY TAB--------------*/
  635. .playlisticon {
  636. padding:25px;
  637. background:#f5f5f5;
  638. width:340px;
  639. position:absolute;
  640. top:0px;
  641. height:70px;
  642. }
  643.  
  644. .playlisticon i {
  645. background:#fcd6cc;
  646. padding:20px;
  647. font-size:30px;
  648. border-radius:5px;
  649. }
  650.  
  651. .playlistinfo {
  652. font-size:8px;
  653. text-transform:uppercase;
  654. letter-spacing:2px;
  655. font-weight:800;
  656. position:absolute;
  657. left:115px;
  658. bottom:20px;
  659. line-height:17px;
  660. }
  661.  
  662. .playlistinfo playlistname {
  663. font-size:14px;
  664. color:#e7a767;
  665. }
  666.  
  667. .playlistbttm {
  668. background:#e7a767;
  669. position:absolute;
  670. top:120px;
  671. width:340px;
  672. padding:10px;
  673. }
  674.  
  675. .playbutton {
  676. background:#fff;
  677. float:left;
  678. padding:7px 10px 7px 10px;
  679. font-size:8px;
  680. text-transform:uppercase;
  681. letter-spacing:2px;
  682. font-weight:800;
  683. border-radius:5px;
  684. cursor:pointer;
  685. }
  686.  
  687. .playlistbttm i {
  688. float:right;
  689. font-size:20px;
  690. color:#fff;
  691. cursor:pointer;
  692. margin-right:20px;
  693. margin-top:3px;
  694. }
  695.  
  696. .playlist table {
  697. margin-top:165px;
  698. font-size:8px;
  699. text-transform:uppercase;
  700. letter-spacing:2px;
  701. font-weight:800;
  702. }
  703.  
  704. .playlist table th {
  705. font-weight:800;
  706. color:#e7a767;
  707. width:119px;
  708. text-align:left;
  709. padding:10px;
  710. }
  711.  
  712.  
  713. .playlist table td {
  714. padding:6px;
  715. padding-left:10px;
  716. }
  717.  
  718.  
  719.  
  720. </style>
  721. <body>
  722. <div class="vcnilla">
  723.  
  724. <div id="name">
  725. <p class="stretch">username</p>
  726.  
  727. <div class="textbox">
  728. lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet</div>
  729. </div>
  730.  
  731. <div id="quote">lorem ipsum dolor sit amet consectuer</div>
  732.  
  733. <div id="sidebar" class="tab">
  734.  
  735. <li><button class="tablinks active" onclick="openCity(event, 'tab1')">
  736. instagram
  737. </button></li>
  738.  
  739. <li><button class="tablinks" onclick="openCity(event, 'tab2')">
  740. twitter
  741. </button></li>
  742.  
  743. <li><button class="tablinks" onclick="openCity(event, 'tab3')">
  744. google
  745. </button></li>
  746.  
  747. <li><button class="tablinks" onclick="openCity(event, 'tab4')">
  748. spotify
  749. </button></li>
  750.  
  751. </div>
  752.  
  753.  
  754. <!----------------TAB 01---------------->
  755. <div id="tab1" class="tabcontent" style="display:block;">
  756.  
  757. <div class="postscontainer">
  758.  
  759. <!---------A POST--------->
  760.  
  761. <div class="apost">
  762. <div class="iggusername">
  763. @username <timeago>2h ago</timeago>
  764. </div>
  765.  
  766. <div class="igcontent">
  767.  
  768. <img src="http://via.placeholder.com/300x270">
  769.  
  770. </div>
  771.  
  772. <div class="poststats">
  773. <i class="fas fa-comments"></i> <i class="far fa-heart"></i> <i class="fas fa-paper-plane"></i> </div>
  774.  
  775. <div class="postcaption">
  776.  
  777. <b>username</b> lorem ipsum dolor amet</div>
  778.  
  779. </div>
  780.  
  781. <!---------- A POST END ---------->
  782.  
  783. <!---------A POST--------->
  784.  
  785. <div class="apost">
  786. <div class="iggusername">
  787. @username <timeago>2h ago</timeago>
  788. </div>
  789.  
  790. <div class="igcontent">
  791.  
  792. <img src="http://via.placeholder.com/300x270">
  793.  
  794. </div>
  795.  
  796. <div class="poststats">
  797. <i class="fas fa-comments"></i> <i class="far fa-heart"></i> <i class="fas fa-paper-plane"></i> </div>
  798.  
  799. <div class="postcaption">
  800.  
  801. <b>username</b> lorem ipsum dolor amet</div>
  802.  
  803. </div>
  804.  
  805. <!---------- A POST END ---------->
  806.  
  807. <!---------A POST--------->
  808.  
  809. <div class="apost">
  810. <div class="iggusername">
  811. @username <timeago>2h ago</timeago>
  812. </div>
  813.  
  814. <div class="igcontent">
  815.  
  816. <img src="http://via.placeholder.com/300x270">
  817.  
  818. </div>
  819.  
  820. <div class="poststats">
  821. <i class="fas fa-comments"></i> <i class="far fa-heart"></i> <i class="fas fa-paper-plane"></i> </div>
  822.  
  823. <div class="postcaption">
  824.  
  825. <b>username</b> lorem ipsum dolor amet</div>
  826.  
  827. </div>
  828.  
  829. <!---------- A POST END ---------->
  830.  
  831.  
  832. </div></div>
  833.  
  834. <!----------------TAB 01 END---------------->
  835.  
  836.  
  837.  
  838. <!------------------TAB 02------------------>
  839. <div id="tab2" class="tabcontent">
  840.  
  841. <div class="twitheader">
  842. <img src="https://via.placeholder.com/340x90">
  843. </div>
  844.  
  845. <div class="twitterstats">
  846. <li><number>234</number><br>tweets</li>
  847. <li><number>1.8MIL</number><br>followers</li>
  848. <li><number>253</number><br>following</li>
  849. </div>
  850.  
  851. <div class="twiticon">
  852. <img src="https://via.placeholder.com/60x60">
  853. </div>
  854.  
  855.  
  856. <!----------TWITTER SIDEBAR---------->
  857. <div class="twitsidebar">
  858. <username>@username</username>
  859. <p>
  860. lorem ipsum dolor sit amet lorem ipsum dolor sit
  861. </div>
  862. <!----------TWITTER SIDEBAR---------->
  863.  
  864.  
  865. <!--------TWEETS CONTAINER-------->
  866. <div class="tweetscontainer">
  867.  
  868. <!---------A TWEET--------->
  869. <div class="atweet">
  870. <div class="atweetusername">
  871. @username <timeago>2h ago</timeago>
  872. </div>
  873.  
  874. <div class="atweetcontent">lorem ipsum dolor sit amet lorem ipsum dolor sit lorem ipsum dolor sit amet lorem ipsum dolor sit lorem ipsum dolor sit amet lorem ipsum dolor sit</div>
  875.  
  876. <div class="tweetstats">
  877. <i class="fas fa-retweet"></i> 14.4k &nbsp; <i class="far fa-heart"></i> 20.3k
  878. </div>
  879.  
  880. </div>
  881. <!---------A TWEET--------->
  882.  
  883.  
  884. <!---------A TWEET--------->
  885. <div class="atweet">
  886. <div class="atweetusername">
  887. @username <timeago>5h ago</timeago>
  888. </div>
  889.  
  890. <div class="atweetcontent">lorem ipsum dolor sit amet lorem ipsum dolor sit lorem ipsum dolor sit amet lorem ipsum dolor sit lorem ipsum dolor sit amet lorem ipsum dolor sit</div>
  891.  
  892. <div class="tweetstats">
  893. <i class="fas fa-retweet"></i> 14.4k &nbsp; <i class="far fa-heart"></i> 20.3k
  894. </div>
  895.  
  896. </div>
  897. <!---------A TWEET--------->
  898.  
  899.  
  900. <!---------A TWEET--------->
  901. <div class="atweet">
  902. <div class="atweetusername">
  903. @username <timeago>1d ago</timeago>
  904. </div>
  905.  
  906. <div class="atweetcontent">lorem ipsum dolor sit amet lorem ipsum dolor sit lorem ipsum dolor sit amet lorem ipsum dolor sit lorem ipsum dolor sit amet lorem ipsum dolor sit</div>
  907.  
  908. <div class="tweetstats">
  909. <i class="fas fa-retweet"></i> 14.4k &nbsp; <i class="far fa-heart"></i> 20.3k
  910. </div>
  911.  
  912. </div>
  913. <!---------A TWEET--------->
  914.  
  915.  
  916. </div>
  917. <!--------TWEETS CONTAINER-------->
  918.  
  919.  
  920. </div>
  921. <!----------------TAB 02 END---------------->
  922.  
  923. <!----------------TAB 03---------------->
  924. <div id="tab3" class="tabcontent">
  925. <div class="googletopbar">
  926. <div class="searchbar">current search result</div></div>
  927.  
  928. <div class="googlesearches">
  929. last google searches
  930.  
  931. <li>search result #1 <time>5:33pm</time></li>
  932. <li>search result #2 <time>4:33pm</time></li>
  933. <li>search result #3 <time>3:33pm</time></li>
  934. </div>
  935.  
  936. <div class="bookmarks">
  937. bookmarks
  938.  
  939. <li><letter>c</letter> https://www.bookmark.com</li>
  940. <li><letter>p</letter> https://www.bookmark.com</li>
  941. <li><letter>c</letter> https://www.bookmark.com</li>
  942. </div>
  943.  
  944. <div class="googleaccount">
  945. <div class="gaccicon">A</div>
  946.  
  947. <div class="gaccinfo"><br>
  948. logged in as <b>##### #####</b>
  949. <p>manage your passwords
  950. <p>log out
  951. </div>
  952. </div>
  953.  
  954. </div>
  955. <!----------------TAB 03 END---------------->
  956.  
  957.  
  958.  
  959.  
  960. <!----------------TAB 04---------------->
  961. <div id="tab4" class="tabcontent">
  962.  
  963. <div class="playlisticon">
  964. <i class="fas fa-headphones"></i>
  965.  
  966. <div class="playlistinfo">
  967. <playlistname>playlist name.</playlistname>
  968. <br>created by #####
  969. <br>32 songs • 3 hr 14 min
  970. </div>
  971. </div>
  972.  
  973. <div class="playlistbttm">
  974. <div class="playbutton">start playlist</div>
  975.  
  976. <i class="fas fa-ellipsis-h"></i>
  977. </div>
  978.  
  979. <div class="playlist">
  980. <table>
  981. <tr>
  982. <th>song name</th>
  983. <th>artist</th>
  984. <th style="width:30px;">time</th>
  985. </tr>
  986. <tr>
  987. <td>song name</td>
  988. <td>artist</td>
  989. <td>3:05</td>
  990. </tr>
  991. <tr>
  992. <td>song name</td>
  993. <td>artist</td>
  994. <td>4:02</td>
  995. </tr>
  996. <tr>
  997. <td>song name</td>
  998. <td>artist</td>
  999. <td>1:00</td>
  1000. </tr>
  1001. <tr>
  1002. <td>song name</td>
  1003. <td>artist</td>
  1004. <td>1:00</td>
  1005. </tr>
  1006. <tr>
  1007. <td>song name</td>
  1008. <td>artist</td>
  1009. <td>1:00</td>
  1010. </tr>
  1011. <tr>
  1012. <td>song name</td>
  1013. <td>artist</td>
  1014. <td>1:00</td>
  1015. </tr>
  1016. <tr>
  1017. <td>song name</td>
  1018. <td>artist</td>
  1019. <td>1:00</td>
  1020. </tr>
  1021. <tr>
  1022. <td>song name</td>
  1023. <td>artist</td>
  1024. <td>1:00</td>
  1025. </tr>
  1026. </table>
  1027. </div>
  1028.  
  1029.  
  1030. </div>
  1031. <!----------------TAB 04 END---------------->
  1032.  
  1033.  
  1034. </div>
  1035. <!----------END OF ENTIRE CONTAINER------------->
  1036.  
  1037.  
  1038. <div id="credit">
  1039. <a href="http://vcnilla.tumblr.com/" title="vcnilla">
  1040. <i class="fas fa-bolt"></i>
  1041. </div>
  1042.  
  1043.  
  1044.  
  1045. </body>
  1046. </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!