API tools faq
paste
Advertisement
vcnillacodes

FOLLOWING / jckieburkhart & stevenhyd

vcnillacodes
May 5th, 2018
2,230
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.95 KB | None | 0 0
raw download clone embed print report
  1. <!---------------- CODE BY JCKIEBURKHART & STEVENHYD ---------------->
  2.  
  3.  
  4. <html>
  5. <head>
  6.  
  7.  
  8. <title>title goes here !</title>
  9. <link rel="shortcut icon" href="http://i.imgur.com/4IoPVYC.png">
  10.  
  11.  
  12. <!-- SCRIPTS -->
  13. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  14. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
  15.  
  16.  
  17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  18. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  19.  
  20.  
  21. <script>
  22. (function($){
  23. $(document).ready(function() {
  24. $("a[title]").style_my_tooltips({
  25. tip_follows_cursor:true,
  26. tip_delay_time:20,
  27. tip_fade_speed:200,
  28. attribute:"title"
  29. });
  30. });
  31. })(jQuery);
  32. </script>
  33.  
  34.  
  35.  
  36. <script>
  37. function openCity(evt, cityName) {
  38. var i, tabcontent, tablinks;
  39. tabcontent = document.getElementsByClassName("tabcontent");
  40. for (i = 0; i < tabcontent.length; i++) {
  41. tabcontent[i].style.display = "none";
  42. }
  43. tablinks = document.getElementsByClassName("tablinks");
  44. for (i = 0; i < tablinks.length; i++) {
  45. tablinks[i].className = tablinks[i].className.replace(" active", "");
  46. }
  47. document.getElementById(cityName).style.display = "block";
  48. evt.currentTarget.className += " active";
  49. }
  50. </script>
  51.  
  52.  
  53. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
  54. <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700,800" rel="stylesheet">
  55. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
  56.  
  57.  
  58. <link href="https://file.myfontastic.com/DCGTgB4mTJXfQAVznNEbjR/icons.css" rel="stylesheet">
  59. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  60. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  61. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
  62.  
  63. <!-- STATS POPUP SCRIPT -->
  64. <script>
  65. $(document).ready(function(){
  66. $(".igicon").click(function(){
  67. $("#instastory").fadeToggle(300);
  68. });
  69. });
  70. </script>
  71.  
  72. </head>
  73. <style type="text/css">
  74.  
  75.  
  76. /*--------------FONTS---------------*/
  77. @font-face{ font-family:"peterjohns"; src:url('https://dl.dropboxusercontent.com/s/sdqp8b9i2q4rz57/Peter%20Jhons.otf');}
  78. @font-face{ font-family:"hullist"; src:url('https://dl.dropboxusercontent.com/s/sz0lgkxipmtspo6/Vincentia.otf');}
  79.  
  80. /*---------------SCROLLBAR--------------*/
  81. ::-webkit-scrollbar {width: 0px; height: 4px;}
  82. ::-webkit-scrollbar-thumb { background-color: #d9d9d9;}
  83.  
  84.  
  85. /*-----------------TOOLTIPS----------------*/
  86. #s-m-t-tooltip { max-width:300px; border-radius: 0px; padding:1px; padding-left:4px; padding-right:4px; margin:25px 20px 5px 0px; color:#949494; font-family: Montserrat; background: #f5f5f5; border:1px solid #e5e5e5; border-radius:3px; z-index:99999; font-size:7px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; }
  87.  
  88.  
  89. /*-----------------BASIC BODY STUFF-------------*/
  90. body { color:#8d8d8d; background-color:#eeeeee; text-align:justify; font-family:'open sans'; font-size:9px; -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; }
  91. .vcnilla { width:640px; height:480px; position: absolute; top:0; bottom:0px; left:0; right:0; margin:auto; background:#fff; text-align:justify; box-shadow:0px 0px 15px rgba(0,0,0,0.03); }
  92.  
  93.  
  94. /*---------------LINKS & FONT STUFF----------------*/
  95. a:link, a:active, a:visited { color: #aaa; text-decoration:none; }
  96. a:hover { color:#aaa; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;}
  97.  
  98.  
  99. /*------------------TABS------------------*/
  100. div.tab { overflow: hidden; position:absolute; margin:auto; width:170px; height:100px; bottom:5px; left:25px; z-index:99; }
  101. div.tab button { float:left; border:none; outline:none; cursor:pointer; font-family:'montserrat'; font-size:11px; font-weight:500; color:#fbfbfb; padding:5px; width:135px; height:15px; text-transform:uppercase; letter-spacing:1px; margin-top:10px; transition:0.3s; text-align:left; background:none; }
  102. div.tab button:hover { transition:0.3s; }
  103. div.tab button.active { color:#5d5d5d; transition:0.3s; transform:scale(1);}
  104. .tabcontent { display: none; width:640px; height:360px; position:absolute; top:0px; right:0px; overflow:hidden; }
  105. .tabcontent { animation: fadeEffect 0.6s; }
  106. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  107.  
  108. .box1 { background:#f5f5f5; width:360px; height:360px; position:absolute; top:0px; left:0px; }
  109. .box2 { background:#fff; width:280px; height:360px; position:absolute; top:0px; right:0px; border-radius:None; }
  110. .box3 { background:#d7ccc9; width:400px; height:120px; position:absolute; bottom:0px; right:0px; }
  111. .box4 { background:#fbfbfb; width:240px; height:120px; position:absolute; bottom:0px; left:0px; }
  112. .box4 img { width:240px; height:120px; }
  113.  
  114. .name { position:absolute; bottom:15px; right:25px; font-size:70px; font-family:'hullist'; color:#4d4d4d; z-index:99; }
  115.  
  116. /*------------- INSTAGRAM TAB --------------*/
  117. .igicon { position:absolute; top:23px; left:20px; cursor:pointer; }
  118. .igicon img { width:40px; height:40px; border-radius:100%; padding:1px; border:2px solid #d7ccc9; }
  119. .igname { position:absolute; top:33px; left:80px; font-weight:bold; color:#7c7c7c; }
  120. .igname username { color:#aeaeae; font-weight:500; }
  121.  
  122. #igfeed { background:#f7f7f7; position:absolute; width:360px; height:360px; left:0px; overflow:auto; }
  123. .igpost { width:300px; background:#fff; border-radius:7px; margin:30px; margin-top:25px; box-shadow:0px 0px 5px rgba(0,0,0,0.02); text-align:left; padding-bottom:1px; font-family:'open sans'; }
  124.  
  125. .igposticon img { border-radius:100%; width:30px; height:30px; margin:7px; position:absolute; margin-bottom:12px; }
  126. .mainigimg { width:300px; height:300px; position:relative; top:44px; }
  127. .mainigimg img { width:300px; height:300px; }
  128. .igtopinfo { text-align:left; position:absolute; height:20px; margin-top:12px; left:80px; line-height:11px; }
  129. .igbottinfo { margin:8px; margin-top:52px; text-align:left; }
  130. .igbottinfo i { font-size:12px; }
  131.  
  132. .igfollow { font-weight:bold; background:#d7ccc9; position:absolute; color:#fbfbfb; border-radius:15px; padding:7px; padding-left:9px; padding-right:9px; letter-spacing:1px; font-size:7px; cursor:pointer; top:35px; right:20px; font-family:'montserrat'; }
  133.  
  134. .igstats { position:absolute; top:85px; font-weight:600; font-size:7px; letter-spacing:1px; font-family:'montserrat'; }
  135. .igstats li { list-style-type:none; float:left; width:91px; text-align:center; }
  136. .igstats li b { color:#d7ccc9; font-size:13px; font-weight:500; }
  137. .igdesc { position:absolute; top:125px; left:25px; right:25px; }
  138.  
  139. .igfeedoverview { position:absolute; top:180px; text-align:center; }
  140. .igfeedoverview img { margin:5px; border-radius:5px; width:70px; height:70px; }
  141.  
  142. /* ---- INSTAGRAM STORY ---- */
  143. #instastory { background:#fff; position:absolute; bottom:0px; right:0px; height:280px; width:280px; display:none; }
  144.  
  145. .fullcontain img { width:280px; height:270px; }
  146. .fullcontain { background:#f9f9f9; width:280px; height:260px; position:absolute; top:0px; right:0px; left:0px; bottom:0px; margin:auto; animation:story 0.5s; }
  147. .full2, .full3, .full4 { position:absolute; top:0px; }
  148. .full2 { opacity:0; }
  149. .full3 { opacity:0; }
  150. .full4 { opacity:0; }
  151. .fullcontain:hover .full2 { opacity:1; transition-delay:1.5s; }
  152. .fullcontain:hover .full3 { opacity:1; transition-delay:3s; }
  153. .fullcontain:hover .full4 { opacity:1; transition-delay:4.5s; }
  154. .storyinfo { position:absolute; top:0px; left:0px; color:#fff; letter-spacing:1px; padding:10px; width:280px; font-family:'montserrat'; font-size:8px; }
  155. .storyinfo b { font-weight:700; text-transform:uppercase; }
  156.  
  157.  
  158. /*------------- TWITTER TAB --------------*/
  159.  
  160. /*--- SIDEBAR ---*/
  161. #sidebar { background:#fff; width:210px; height:100%; position:absolute; left:0px; top:0px; z-index:999; }
  162. #sidebar img { border:4px solid #fff; box-shadow:2px 2px 0px #f6f6f6; border-radius:100%; position:absolute; top:45px; left:140px; width:100px; height:100px; }
  163. .profilename { font-family:montserrat; font-size:23px; letter-spacing:-1px; font-weight:200; position:absolute; text-align:right; width:100px; top:65px; right:85px; }
  164. .profilename2 { font-family:montserrat; font-size:8px; letter-spacing:1px; font-weight:700; position:absolute; text-align:right; width:100px; top:95px; right:85px; text-transform:uppercase; }
  165. .followbutt { font-weight:bold; background:#d7ccc9; position:absolute; color:#fbfbfb; border-radius:15px; padding:7px; padding-left:9px; padding-right:9px; letter-spacing:1px; font-size:7px; letter-spacing:3px; cursor:pointer; top:115px; right:75px; font-family:'montserrat'; text-transform:uppercase;}
  166. .followbutt:hover { background:#fff; color:#d7ccc9; border:1px solid #d7ccc9; }
  167. #profiledesc { font-family:'open sans'; margin:20px; text-align:justify; margin-top:170px; }
  168. #stats { width:243px; }
  169. #stats li { list-style-type:none; margin:25px; height:16px; text-align:right; font-family:montserrat; font-weight:none; text-transform:uppercase; letter-spacing:1px; font-size:7px; }
  170. #stats i { background:#fff; float:right; font-size:13px; width:13px; height:13px; padding:7px; border-radius:100%; vertical-align:bottom; margin-left:35px; margin-top:-10px; border:1px solid #f2f2f2; color:#d7ccc9; }
  171. #stats i::after { content:""; width:30px; height:1px; background:#f1f1f1; position:absolute; margin-top:-7px; margin-left:-50px; }
  172.  
  173. /* --- FEED ---*/
  174. #tweetfeed { position:absolute; width:350px; height:340px; right:15px; top:0px; overflow:auto; padding-left:70px; padding-top:30px; }
  175. .atweet { background:#fff; width:340px; height:auto; margin-bottom:35px; padding-bottom:8px; text-align:justify; border-radius:5px; }
  176. .tweeticon img { width:30px; border-radius:100%; margin:10px; }
  177. .tweetcontent { font-size:9px; margin-left:10px; margin-right:10px; line-height:13px; margin-top:5px; }
  178. .tweetuser { width:150px; height:34px; font-size:10px; line-height:13px; position:relative; margin-top:-40px; margin-left:45px; }
  179. .tweetuser b { font-size:12px; color:#d7ccc9; }
  180. .tweetimages { margin-left:10px; margin-top:8px; }
  181. .tweetoverlay { background:#fff; width:306px; padding:17px; text-align:center; margin-top:-44px; position:relative; opacity:0; transition:0.5s; margin-bottom:0px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; font-size:7px; border-top-left-radius:5px; border-top-right-radius:5px; }
  182. .atweet:hover .tweetoverlay { opacity:0.9; margin-top:-44px; transition:0.5s; }
  183. .tweetoverlay i { font-size:9px; margin-top:-2px; vertical-align:middle; color:#d7ccc9; }
  184. .likeretweet { width:340px; text-align:center; height:15px; }
  185. .likeretweet i { background:#fff; font-size:10px; border-radius:100%; width:10px; height:10px; padding:6px; border:1px solid #f0f0f0; position:relative; margin-top:10px; cursor:pointer; margin-left:5px; margin-right:5px; }
  186. .likeretweet i:hover { background:#d7ccc9; border:1px solid #d7ccc9; color:#fff; }
  187.  
  188. /* this is for the images if u want that */
  189.  
  190. .tweetimages { margin-left:5px; margin-top:8px; }
  191.  
  192. /* this is for the twitter polling if u want that */
  193.  
  194. .yesvote { background:#fff; border:1px solid #f8f8f8; border-radius:1px; width:305px; font-size:9px; margin-left:0px; margin-right:10px; padding:5px; height:auto; margin-top:10px; padding-bottom:5px; margin-bottom:20px; font-size:9px; line-height:13px; }
  195.  
  196. .yesvotehover { background:#aaa; color:#fff; width:45px; font-size:9px; margin-left:0px; margin-right:10px; padding:5px; height:auto; opacity:0.3; margin-top:-45px; padding-bottom:5px; height:15px; margin-bottom:2px; font-size:9px; line-height:13px; }
  197.  
  198. .novotehover { background:#aaa; color:#fff; width:265px; font-size:9px; margin-left:0px; margin-right:10px; padding:5px; height:auto; opacity:0.3; margin-top:-45px; padding-bottom:5px; height:15px; margin-bottom:0px; font-size:9px; line-height:13px; }
  199.  
  200. /* ------- BANK TAB -------*/
  201. .bank1 { background:#fff; width:250px; height:500px; position:absolute; }
  202. .acard { background:#d7ccc9; width:210px; height:125px; border-radius:10px; float:left; margin-left:35px; margin-top:35px; transition:0.5s; cursor:Pointer; }
  203. .card2 { background:#ddd; }
  204. .acard i { color:#fff; font-size:25px; margin-top:15px; margin-left:160px; }
  205. .cardnum { font-weight:300; color:#fff; font-size:17px; margin-top:15px; width:190px; text-align:left; margin-left:15px; }
  206. .cardnum span { font-size:8px; font-weight:700; text-transform:uppercase; font-family:'montserrat'; letter-spacing:1px; }
  207. .cardhover { background:#fff; position:absolute; margin-top:0px; width:210px; height:70px; opacity:0; text-align:center; font-weight:700; text-transform:uppercase; padding-top:55px; transition:0.5s; }
  208. .acard:hover > .cardhover { opacity:0.8; transition:0.5s; }
  209.  
  210. .bank1text { font-family:'montserrat'; font-size:16px; font-weight:400; letter-spacing:1px; text-align:center; margin:35px; }
  211. .bankleft li { list-style-type:none; margin:10px; margin-left:0px; font-family:'montserrat'; font-weight:500; letter-spacing:2px; text-align:center; }
  212. .bankleft li b { color:#d7ccc9; font-size:12px; font-weight:600; }
  213. .bankleft li i { margin:7px; }
  214. .bankbottomtext { font-family:'montserrat'; font-size:14px; font-weight:500; letter-spacing:1px; text-align:center; margin:28px; }
  215.  
  216. /* DON'T EVEN THINK ABOUT IT */
  217.  
  218. #credit { position:fixed; bottom:11px; left:11px; background:#d7ccc9; width:17px; height:17px; border-radius:76px; padding:6px; font-size:8px; font-weight:bold; transition:0.4s; }
  219. #credit i { color:#f5f5f5; font-size:17px; vertical-align:text-top; margin-right:5px; }
  220. #credit:hover { width:177px; transition:0.4s; }
  221. #credit:hover .crtext { opacity:1; transition:1.3s;}
  222. .crtext { width:150px; float:right; position:absolute; top:9px; right:9px; opacity:0; transition:0.3s; color:#f5f5f5; }
  223.  
  224. </style>
  225. <body>
  226. <div class="vcnilla">
  227.  
  228. <!------------------TAB BOX (BOTTOM RIGHT)------------------->
  229.  
  230. <div class="box3">
  231.  
  232. <div class="tab">
  233. <button class="tablinks active" onclick="openCity(event, 'tab1')"><b>01</b> INSTAGRAM</button>
  234. <button class="tablinks" onclick="openCity(event, 'tab2')"><b>02</b> TWITTER
  235. </button>
  236. <button class="tablinks" onclick="openCity(event, 'tab3')"><b>03</b> BANK
  237. </button>
  238. </div>
  239.  
  240. </div>
  241.  
  242. <div class="name">Name</div>
  243.  
  244. <!------------IMAGE BOX (BOTTOM LEFT)-------------->
  245. <div class="box4"><img src="http://via.placeholder.com/240x120/4d4d4d/d7ccc9"></div>
  246.  
  247.  
  248.  
  249.  
  250. <!----------------------------------TAB ONE------------------------------------>
  251.  
  252. <div id="tab1" class="tabcontent" style="display:block;">
  253.  
  254. <div class="box1">
  255.  
  256. <!--------------START OF INSTAGRAM FEED--------------->
  257. <div id="igfeed">
  258.  
  259. <!-------------INSTAGRAM POST 1---------------->
  260. <div class="igpost">
  261. <div class="igposticon"><img src="http://via.placeholder.com/30x30"></div>
  262. <div class="igtopinfo">
  263. <b>username</b>
  264. <br>Los Angeles, California
  265. </div>
  266.  
  267. <div class="mainigimg"><img src="http://via.placeholder.com/300x300"> </div>
  268.  
  269. <div class="igbottinfo">
  270. <i class="fas fa-heart"></i>
  271. <i class="far fa-comment" style="margin-left:4px;"></i>
  272. <br><b>username</b> post caption
  273. </div>
  274. </div>
  275. <!-----------END OF INSTAGRAM POST 1---------->
  276.  
  277. <!-------------INSTAGRAM POST 2---------------->
  278. <div class="igpost">
  279. <div class="igposticon"><img src="http://via.placeholder.com/30x30"></div>
  280. <div class="igtopinfo">
  281. <b>username</b>
  282. <br>Los Angeles, California
  283. </div>
  284.  
  285. <div class="mainigimg"><img src="http://via.placeholder.com/300x300"> </div>
  286.  
  287. <div class="igbottinfo">
  288. <i class="fas fa-heart"></i>
  289. <i class="far fa-comment" style="margin-left:4px;"></i>
  290. <br><b>username</b> post caption
  291. </div>
  292. </div>
  293. <!-----------END OF INSTAGRAM POST 2---------->
  294.  
  295. <!-------------INSTAGRAM POST 3---------------->
  296. <div class="igpost">
  297. <div class="igposticon"><img src="http://via.placeholder.com/30x30"></div>
  298. <div class="igtopinfo">
  299. <b>username</b>
  300. <br>Los Angeles, California
  301. </div>
  302.  
  303. <div class="mainigimg"><img src="http://via.placeholder.com/300x300"> </div>
  304.  
  305. <div class="igbottinfo">
  306. <i class="fas fa-heart"></i>
  307. <i class="far fa-comment" style="margin-left:4px;"></i>
  308. <br><b>username</b> post caption
  309. </div>
  310. </div>
  311. <!-----------END OF INSTAGRAM POST 3---------->
  312.  
  313. <!-------------INSTAGRAM POST 4---------------->
  314. <div class="igpost">
  315. <div class="igposticon"><img src="http://via.placeholder.com/30x30"></div>
  316. <div class="igtopinfo">
  317. <b>username</b>
  318. <br>Los Angeles, California
  319. </div>
  320.  
  321. <div class="mainigimg"><img src="http://via.placeholder.com/300x300"> </div>
  322.  
  323. <div class="igbottinfo">
  324. <i class="fas fa-heart"></i>
  325. <i class="far fa-comment" style="margin-left:4px;"></i>
  326. <br><b>username</b> post caption
  327. </div>
  328. </div>
  329. <!-----------END OF INSTAGRAM POST 4---------->
  330.  
  331. <!-------------INSTAGRAM POST 5---------------->
  332. <div class="igpost">
  333. <div class="igposticon"><img src="http://via.placeholder.com/30x30"></div>
  334. <div class="igtopinfo">
  335. <b>username</b>
  336. <br>Los Angeles, California
  337. </div>
  338.  
  339. <div class="mainigimg"><img src="http://via.placeholder.com/300x300"> </div>
  340.  
  341. <div class="igbottinfo">
  342. <i class="fas fa-heart"></i>
  343. <i class="far fa-comment" style="margin-left:4px;"></i>
  344. <br><b>username</b> post caption
  345. </div>
  346. </div>
  347. <!-----------END OF INSTAGRAM POST 5---------->
  348.  
  349. <!-------------INSTAGRAM POST 6---------------->
  350. <div class="igpost">
  351. <div class="igposticon"><img src="http://via.placeholder.com/30x30"></div>
  352. <div class="igtopinfo">
  353. <b>username</b>
  354. <br>Los Angeles, California
  355. </div>
  356.  
  357. <div class="mainigimg"><img src="http://via.placeholder.com/300x300"> </div>
  358.  
  359. <div class="igbottinfo">
  360. <i class="fas fa-heart"></i>
  361. <i class="far fa-comment" style="margin-left:4px;"></i>
  362. <br><b>username</b> post caption
  363. </div>
  364. </div>
  365. <!-----------END OF INSTAGRAM POST 6---------->
  366.  
  367.  
  368. </div>
  369. <!-------------END OF INSTAGRAM FEED---------------->
  370.  
  371. </div>
  372. <!-------------END OF BOX 1 IN FIRST TAB----------------->
  373.  
  374.  
  375.  
  376. <!-------------BOX 2 IN FIRST TAB------------->
  377. <div class="box2">
  378. <div class="igicon"><img src="http://via.placeholder.com/40x40"></div>
  379. <div class="igname">First Last <br><username>@username</username></div>
  380. <div class="igfollow">FOLLOWING</div>
  381.  
  382. <div class="igstats">
  383. <li><b>389</b> <br>POSTS</li>
  384. <li><b>64m</b> <br>FOLLOWERS</li>
  385. <li><b>120</b> <br>FOLLOWING</li>
  386. </div>
  387.  
  388. <div class="igdesc">lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris erat diam, lobortis in euismod nec, congue nec orci.</div>
  389.  
  390. <div class="igfeedoverview">
  391. <img src="http://via.placeholder.com/70x70">
  392. <img src="http://via.placeholder.com/70x70">
  393. <img src="http://via.placeholder.com/70x70">
  394. <img src="http://via.placeholder.com/70x70">
  395. <img src="http://via.placeholder.com/70x70">
  396. <img src="http://via.placeholder.com/70x70">
  397. </div>
  398.  
  399. <!----------- INSTAGRAM STORY------------->
  400. <div id="instastory">
  401. <div class="fullcontain">
  402. <div class="storyinfo"><b>@username</b> 22h</div>
  403. <img src="http://via.placeholder.com/280x270">
  404.  
  405. <div class="full2">
  406. <div class="storyinfo"><b>@username</b> 10h</div>
  407. <img src="http://via.placeholder.com/280x270"></div>
  408.  
  409. <div class="full3">
  410. <div class="storyinfo"><b>@username</b> 5h</div>
  411. <img src="http://via.placeholder.com/280x270"></div>
  412.  
  413. <div class="full4">
  414. <div class="storyinfo"><b>@username</b> 1h</div>
  415. <img src="http://via.placeholder.com/280x270"></div></div>
  416. </div>
  417.  
  418.  
  419. </div>
  420. <!-------------END OF BOX 2 IN FIRST TAB----------------->
  421.  
  422.  
  423. </div>
  424. <!------------------END OF TAB ONE----------------->
  425.  
  426.  
  427.  
  428.  
  429. <!-----------------------------------TAB TWO----------------------------------->
  430. <div id="tab2" class="tabcontent">
  431. <div class="box1" style="width:250px; background-color:#fff;">
  432.  
  433. <!--- TWITTER SB --->
  434. <div id="sidebar">
  435. <img src="http://via.placeholder.com/100x100">
  436. <div class="profilename">name</div>
  437. <div class="profilename2">@username</div>
  438. <div class="followbutt">following</div>
  439.  
  440. <div id="profiledesc">this is where the twitter description goes, try and keep it under 3 lines</div>
  441.  
  442. <div id="stats">
  443. <li><b>location:</b> location <i class="icon-location-pin"></i></li>
  444. <li><b>joined:</b> month year<i class="icon-calendar"></i></li>
  445. <li><b>birthday:</b> month year <i class="icon-present"></i></li></div>
  446.  
  447. </div><!--- TWITTER SB END ---></div>
  448.  
  449. <div class="box2" style="background-color:#f5f5f5; width:450px;">
  450. <!--------- THIS IS THE TWITTER FEED ------------>
  451. <div id="tweetfeed">
  452.  
  453. <!----------- TWEET 1 ----------->
  454. <div class="atweet">
  455. <div class="tweeticon"><img src="http://via.placeholder.com/30x30"></div>
  456. <div class="tweetuser"><b>name</b> <br>@username</div>
  457. <div class="tweetoverlay">
  458. <i class="material-icons">favorite</i> 78k likes &nbsp;
  459. <i class="material-icons">swap_horiz</i> 122k retweets &nbsp;
  460. <i class="material-icons">chat_bubble</i> 59k replies
  461. </div>
  462. <div class="tweetcontent">VERY excited to announce that the role of my summer body will be played by my winter body !!!!!</div>
  463.  
  464. <div class="likeretweet"><i class="material-icons">favorite</i> <i class="material-icons">swap_horiz</i> <i class="material-icons">chat_bubble</i></div>
  465.  
  466. </div>
  467. <!---------- TWEET 1 END ---------->
  468.  
  469.  
  470.  
  471. <!----------- TWEET 2 ----------->
  472. <div class="atweet">
  473. <div class="tweeticon"><img src="http://via.placeholder.com/30x30"></div>
  474. <div class="tweetuser"><b>name</b> <br>@username</div>
  475.  
  476. <div class="tweetoverlay">
  477. <i class="material-icons">favorite</i> 88k likes &nbsp;
  478. <i class="material-icons">swap_horiz</i> 232k retweets &nbsp;
  479. <i class="material-icons">chat_bubble</i> 38k replies
  480. </div>
  481.  
  482. <div class="tweetcontent">Wrong. My belly is big aswell
  483. <div class="atweetresponse" style="border:1px solid #f2f2f2; border-radius:5px; margin-top:10px; padding-bottom:10px; ">
  484. <div class="tweeticon"><img src="http://via.placeholder.com/30x30"></div>
  485. <div class="tweetuser"><b>name</b> <br>@username</div>
  486. <div class="tweetcontent">Some of you all you got is your big bum</div>
  487. </div>
  488.  
  489. <div class="likeretweet"><i class="material-icons">favorite</i> <i class="material-icons">swap_horiz</i> <i class="material-icons">chat_bubble</i></div></div>
  490.  
  491. </div>
  492. <!---------- TWEET 2 END ---------->
  493.  
  494. <!----------- TWEET 3 ----------->
  495. <div class="atweet">
  496. <div class="tweeticon"><img src="http://via.placeholder.com/30x30"></div>
  497. <div class="tweetuser"><b>name</b> <br>@username</div>
  498. <div class="tweetoverlay">
  499. <i class="material-icons">favorite</i> 78k likes &nbsp;
  500. <i class="material-icons">swap_horiz</i> 122k retweets &nbsp;
  501. <i class="material-icons">chat_bubble</i> 59k replies
  502. </div>
  503. <div class="tweetcontent">so this is a poll test
  504. <br>
  505. <div class="yesvote"><b>16%</b> yasssss kween </div>
  506. <div class="yesvotehover"></div>
  507.  
  508. <div class="yesvote"><b>84%</b> no... what the henk ?</div>
  509. <div class="novotehover"></div>
  510. </div>
  511.  
  512. <div class="likeretweet"><i class="material-icons">favorite</i> <i class="material-icons">swap_horiz</i> <i class="material-icons">chat_bubble</i></div>
  513.  
  514. </div>
  515. <!---------- TWEET 3 END ---------->
  516.  
  517. <!----------- TWEET 4 ----------->
  518. <div class="atweet">
  519. <div class="tweeticon"><img src="http://via.placeholder.com/30x30"></div>
  520. <div class="tweetuser"><b>name</b> <br>@username</div>
  521.  
  522. <div class="tweetoverlay">
  523. <i class="material-icons">favorite</i> 88k likes &nbsp;
  524. <i class="material-icons">swap_horiz</i> 232k retweets &nbsp;
  525. <i class="material-icons">chat_bubble</i> 38k replies
  526. </div>
  527.  
  528. <div class="tweetcontent">BITCH ITS A PRIVATE JOKE BETWEEN ME AND ME
  529. <div class="atweetresponse" style="border:1px solid #f2f2f2; border-radius:5px; margin-top:10px; padding-bottom:10px; ">
  530. <div class="tweeticon"><img src="http://via.placeholder.com/30x30"></div>
  531. <div class="tweetuser"><b>name</b> <br>@username</div>
  532. <div class="tweetcontent">i dont understand why people laugh by themselves like whats so funny</div>
  533. </div>
  534.  
  535. <div class="likeretweet"><i class="material-icons">favorite</i> <i class="material-icons">swap_horiz</i> <i class="material-icons">chat_bubble</i></div></div>
  536.  
  537. </div>
  538. <!---------- TWEET 4 END ---------->
  539.  
  540. <!----------- TWEET 5 ----------->
  541. <div class="atweet">
  542. <div class="tweeticon"><img src="http://via.placeholder.com/30x30"></div>
  543. <div class="tweetuser"><b>name</b> <br>@username</div>
  544. <div class="tweetoverlay">
  545. <i class="material-icons">favorite</i> 78k likes &nbsp;
  546. <i class="material-icons">swap_horiz</i> 122k retweets &nbsp;
  547. <i class="material-icons">chat_bubble</i> 59k replies
  548. </div>
  549. <div class="tweetcontent">this is an image woaaw look you can tweet a fucking pIcture? you could even tweet multiple pics in one tweet?! WOwW. its like real twitter
  550.  
  551. <div class="tweetimages">
  552. <img src="http://via.placeholder.com/310x180" style="border-radius:7px;">
  553. </div></div>
  554.  
  555. <div class="likeretweet"><i class="material-icons">favorite</i> <i class="material-icons">swap_horiz</i> <i class="material-icons">chat_bubble</i></div>
  556.  
  557. </div>
  558. <!---------- TWEET 5 END ---------->
  559.  
  560. <!----------- TWEET 6 ----------->
  561. <div class="atweet">
  562. <div class="tweeticon"><img src="http://via.placeholder.com/30x30"></div>
  563. <div class="tweetuser"><b>name</b> <br>@username</div>
  564.  
  565. <div class="tweetoverlay">
  566. <i class="material-icons">favorite</i> 88k likes &nbsp;
  567. <i class="material-icons">swap_horiz</i> 232k retweets &nbsp;
  568. <i class="material-icons">chat_bubble</i> 38k replies
  569. </div>
  570.  
  571. <div class="tweetcontent">me when my club penguin boyfriend left my igloo
  572. <div class="atweetresponse" style="border:1px solid #f2f2f2; border-radius:5px; margin-top:10px; padding-bottom:10px; ">
  573. <div class="tweeticon"><img src="http://via.placeholder.com/30x30"></div>
  574. <div class="tweetuser"><b>name</b> <br>@username</div>
  575. <div class="tweetcontent">we never said goodbye
  576. u just disappeared</div>
  577. </div>
  578.  
  579. <div class="likeretweet"><i class="material-icons">favorite</i> <i class="material-icons">swap_horiz</i> <i class="material-icons">chat_bubble</i></div></div>
  580.  
  581. </div>
  582. <!---------- TWEET 6 END ---------->
  583.  
  584.  
  585. </div><!----------- TWITTER FEED END ------------->
  586. </div>
  587. </div>
  588.  
  589.  
  590.  
  591. <!---------------------------------TAB THREE----------------------------------->
  592. <div id="tab3" class="tabcontent">
  593.  
  594. <!---------- TRANSACTION HISTORY ----------->
  595. <div class="box1 bankleft">
  596. <div class="bank1text">TRANSACTION HISTORY</div>
  597. <li><I>MAY 5TH 2018</I> <i class="fas fa-angle-right"></i> TRANSACTION <i class="fas fa-angle-right"></i> <b>$1234</b></li>
  598. <li><I>MAY 5TH 2018</I> <i class="fas fa-angle-right"></i> TRANSACTION <i class="fas fa-angle-right"></i> <b>$1234</b></li>
  599. <li><I>MAY 5TH 2018</I> <i class="fas fa-angle-right"></i> TRANSACTION <i class="fas fa-angle-right"></i> <b>$1234</b></li>
  600. <li><I>MAY 5TH 2018</I> <i class="fas fa-angle-right"></i> TRANSACTION <i class="fas fa-angle-right"></i> <b>$1234</b></li>
  601. <li><I>MAY 5TH 2018</I> <i class="fas fa-angle-right"></i> TRANSACTION <i class="fas fa-angle-right"></i> <b>$1234</b></li>
  602. <li><I>MAY 5TH 2018</I> <i class="fas fa-angle-right"></i> TRANSACTION <i class="fas fa-angle-right"></i> <b>$1234</b></li>
  603.  
  604. <div class="bankbottomtext">CURRENTLY AVAILABLE: ####</div>
  605. </div>
  606.  
  607.  
  608. <!----------------------LEFT SIDE OF BANK TAB---------------------->
  609. <div class="box2">
  610. <div class="bank1">
  611.  
  612. <div class="acard">
  613. <div class="cardhover">available balance: ####</div>
  614. <i class="fab fa-cc-visa"></i>
  615. <div class="cardnum">**** **** **** 1234
  616. <br><span>FIRST M. LAST</span></div>
  617. </div>
  618.  
  619. <div class="acard card2">
  620. <div class="cardhover">available balance: ####</div>
  621. <i class="fab fa-cc-visa"></i>
  622. <div class="cardnum">**** **** **** 4567
  623. <br><span>FIRST M. LAST</span></div>
  624. </div>
  625.  
  626.  
  627. </div>
  628. </div>
  629. </div>
  630.  
  631.  
  632. </div><!----------END OF ENTIRE CONTAINER------------->
  633.  
  634. <!-- CREDIT - DO NOT DELETE -->
  635. <div id="creditbox">
  636. <a class="tooltip" href="http://vcnilla.tumblr.com/">
  637. <div id="credit">
  638. <i class="panicon-bee"></i> <div class="crtext">CODE BY JCKIEBURKHART & STEVENHYD </div</div>
  639. </a></div>
  640. </body>
  641. </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!