API tools faq
paste
Advertisement
vcnillacodes

STORIES / jckieburkhart & stevenhyd

vcnillacodes
Mar 18th, 2018
1,758
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.18 KB | None | 0 0
raw download clone embed print report
  1. <!-- CODE BY JCKIEBURKHART & STEVENHYD / DONT STEAL ANYTHING PLS (: -->
  2.  
  3.  
  4. <html>
  5. <head>
  6.  
  7. <title>title</title>
  8.  
  9. <link rel="shortcut icon" href="https://i.imgur.com/fvpQMfm.png">
  10.  
  11.  
  12. <!-- SCRIPTS -->
  13.  
  14. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  15. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  16.  
  17. <script>
  18. (function($){
  19. $(document).ready(function() {
  20. $("a[title]").style_my_tooltips({
  21. tip_follows_cursor:true,
  22. tip_delay_time:20,
  23. tip_fade_speed:200,
  24. attribute:"title"
  25. });
  26. });
  27. })(jQuery);
  28. </script>
  29.  
  30. <link href="https://file.myfontastic.com/vj4VvKSUaAWbPw7mi8Rf8T/icons.css" rel="stylesheet">
  31. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
  32. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,700i,900" rel="stylesheet">
  33. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  34. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  35.  
  36.  
  37.  
  38.  
  39. </head>
  40.  
  41. <style type="text/css">
  42.  
  43.  
  44. /*---------------SCROLLBAR--------*/
  45. ::-webkit-scrollbar {width: 0px; height: 4px;}
  46. ::-webkit-scrollbar-thumb { background-color: #d9d9d9;}
  47.  
  48.  
  49. /*-----------------TOOLTIPS------------*/
  50. #s-m-t-tooltip { max-width:300px; border-radius: 0px; padding:6px; padding-left:8px; padding-right:8px; margin-top:-58px; color:#949494; font-family: open sans; background: #f5f5f5; border-radius:4px; z-index:99999; font-size:7px; font-weight:bold; text-transform:uppercase; letter-spacing:2px; font-weight:800; left: 50%; -webkit-transform: translateX(-50%); }
  51. #s-m-t-tooltip:before { content:""; width:10px; height:10px; background:#f5f5f5; position:absolute; left:0px; right:0px; margin:auto; transform:rotate(45deg); top:20px; }
  52.  
  53.  
  54.  
  55. /*-----------------BASIC BODY STUFF-------------*/
  56. body { color:#949494; background-color:#e9e9e9; line-height:14px; text-align:justify; font-family:'roboto'; font-size: 10px; letter-spacing:0.5px;
  57. -webkit-font-smoothing: antialiased;
  58. -moz-osx-font-smoothing: grayscale; }
  59.  
  60. #vcnilla { width:420px; height:490px; position: absolute; top:0; bottom:0px; left:0; right:0; margin:auto; background:#f9f9f9; text-align:center; border-left:70px solid #f9f9f9; }
  61.  
  62.  
  63. /*-------------LINKS & FONT STUFF--------------*/
  64. a:link, a:active, a:visited { color: #aaa; text-decoration:none; }
  65. a:hover { color:#aaa; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;}
  66.  
  67.  
  68. .firstimage img { margin-top:80px; }
  69.  
  70. .desc { margin:20px; margin-left:50px; margin-right:50px; font-size:9px; text-align:center; }
  71. .desc b, .desc i { color:#b8aeaa; }
  72.  
  73. .name { font-size:29px; font-family:'playfair display'; font-weight:700; font-style:italic; margin-top:35px; text-align:right; position:absolute; width:285px; right:25px; -webkit-transition: 0.5s ease-out; -moz-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; transition: 0.5s ease-out; padding-bottom:10px; }
  74.  
  75.  
  76.  
  77. /*---------- THE TABS ------------*/
  78. div.tab { float: left; background-color: #f1f1f1; width:100px; height: 300px; margin-left:-70px; }
  79. div.tab button { display: block; background-color: inherit; width: 100px; height:122px; border: none; outline: none; text-align:center; cursor: pointer; transition: 0.3s; font-size: 8px; font-family:'roboto'; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#aaa; padding:0px; line-height:22px; }
  80. div.tab button i { font-size:25px; }
  81. div.tab button:hover { background-color: #ddd; }
  82. div.tab button.active { background-color: #b8aeaa; color:#fff; }
  83. .tabcontent { float: left; width: 390px; border-left: none; height: 490px; right:0px; position:absolute; background:#f9f9f9; }
  84.  
  85. .tabcontent:before { content:""; background:#f9f9f9; position:absolute; width:15px; height:15px; left:-7px; transform:rotate(-45deg); }
  86. #First:before { top:52px; }
  87. #Second:before { top:175px; }
  88. #Third:before { top:298px; }
  89. #Fourth:before { bottom:52px; }
  90.  
  91.  
  92.  
  93. /*---------- THE MAP ------------*/
  94.  
  95. #location { font-size:25px; font-weight:100; font-family:'playfair display'; margin-top:12px; font-weight:bold; font-style:italic; }
  96. #location span { border-bottom:2px solid #b8aeaa; }
  97.  
  98.  
  99. /*---------------- SECOND TAB ---------------*/
  100. #scontainer { width:390px; height:400px; position:absolute; top:90px; right:0px; overflow:auto; }
  101. .post { width:340px; min-height:340px; background:#; padding:10px; margin:15px; margin-top:5px; margin-bottom:20px; }
  102. .postinfo { font-family:'roboto'; font-weight:400; font-size:12px; height:38px; text-align:right; padding-right:5px; }
  103. .postinfo span { border-bottom:1px solid #b8aeaa; }
  104. .postinfo img { width:30px; height:30px; vertical-align:middle; margin-left:10px; border-radius:100%; }
  105. .postdesc { margin-top:10px; margin-left:30px; margin-right:30px; font-size:9px; }
  106. .postdesc span { color:#fff; background:#b8aeaa; font-size:8px; font-weight:bold; font-family: open sans; border-radius:3px; padding:2px; margin-right:4px; padding-left:4px; padding-right:4px; }
  107. .poststats i { color:#b8aeaa; }
  108. .poststats { width:200px; padding:6px; padding-left:8px; padding-right:8px; color:#949494; font-family: open sans; background: #e9e9e9; border-radius:4px; font-size:7px; font-weight:bold; text-transform:uppercase; letter-spacing:2px; font-weight:800; text-align:center; margin:auto; position:absolute; left:0px; right:0px; }
  109. .poststats:before { content:""; width:10px; height:10px; background:#e9e9e9; position:absolute; left:0px; right:0px; margin:auto; transform:rotate(45deg); top:20px; }
  110.  
  111.  
  112.  
  113. /*---------- INNER TABS ------------*/
  114. div.tab1 { float: left; background-color: #f1f1f1; width:390px; height:60px; }
  115. div.tab1 button { display: block; background-color: inherit; width: 195px; height:60px; border: none; outline: none; text-align:center; cursor: pointer; transition: 0.3s; font-size: 8px; font-family:'roboto'; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#aaa; padding:0px; line-height:20px; float:left; }
  116. div.tab1 button i { font-size:15px; }
  117. div.tab1 button:hover { background-color: #ddd; }
  118. div.tab1 button.active { background-color: #b8aeaa; color:#fff; }
  119. .tabcontent1 { float: left; width: 390px; border-left: none; height: 440px; right:0px; bottom:0px; position:absolute; background:#f9f9f9; }
  120.  
  121.  
  122.  
  123.  
  124. /*---------- INSTA DMS ------------*/
  125. .directmsgs { background:#f7f7f7; position:absolute; left:0px; width:390px; height:440px; }
  126. .mssgsearch { border-radius:6px; background:#f0f0f0; margin:18px; margin-top:15px; padding:5px; font-size:8px; width:300px; text-align:center; border:1px solid #f0f0f0; margin-bottom:13px; }
  127. .next { border-radius:0px; background:transparent; margin:0px; margin-top:0px; padding:0px; font-size:10px; width:20px; text-align:center; border:0px solid #f0f0f0; }
  128. .directmsgs ul { padding-left:0px; }
  129. .directmsgs i { color:#b8aeaa; }
  130. .directmsgs li { list-style-type:none; text-align:left; margin-top:0px; border-bottom:1px solid #f0f0f0; padding:14px; height:34px; font-size:9px; }
  131. .directmsgs li img { float:left; width:30px; height:30px; border-radius:100%; margin-right:10px; }
  132. .directmsgs ul li:nth-last-child(1) { border-bottom:0px solid #f0f0f0; }
  133. .directmsgs ul li:nth-child(1) { background:#f0f0f0; }
  134. .directmsgs li b { font-size:11px; color:#b8aeaa; }
  135.  
  136.  
  137.  
  138. /*---------- LATEST DM ------------*/
  139.  
  140. .directmsg { background:#f9f9f9; position:absolute; left:0px; width:390px; height:440px; }
  141. .mssgrec { border-radius:6px; background:transparent; margin:18px; margin-top:15px; padding:5px; font-size:10px; text-transform:uppercase; width:100px; text-align:center; margin-left:280px; border:0px solid #f0f0f0; margin-bottom:13px; }
  142. .next { border-radius:0px; background:transparent; margin:0px; margin-top:0px; padding:0px; font-size:10px; width:20px; text-align:center; border:0px solid #f0f0f0; }
  143. .directmsg ul { padding-left:0px; }
  144. .directmsg i { color:#b8aeaa; }
  145. .directmsg li { list-style-type:none; text-align:left; margin-top:0px; border-bottom:1px solid #f0f0f0; padding:10px; height:34px; font-size:9px; }
  146. .directmsg li img { float:left; width:30px; height:30px; border-radius:100%; margin-right:10px; }
  147. .directmsg ul li:nth-last-child(1) { border-bottom:0px solid #f0f0f0; }
  148. .directmsg ul li:nth-child(1) { background:#f0f0f0; }
  149. .directmsg li b { font-size:11px; color:#b8aeaa; }
  150.  
  151.  
  152. .textcontain { width:390px; height:335px; padding-top:10px; background-color:#F9F9F9; border-top:1px solid #f0f0f0; font-weight:bold; }
  153. .lefttxt { background:#F0F0F0; padding:7px; border-radius:10px; margin:20px; max-width:50%; font-size:8px; border-bottom-left-radius:0px; text-transform:uppercase; letter-spacing:1px; }
  154. .righttxt { background:#b8aeaa; padding:7px; border-radius:10px; margin:20px; max-width:50%; font-size:8px; color:#fff; margin-left:169px; border-bottom-right-radius:0px; text-transform:uppercase; letter-spacing:1px; }
  155.  
  156. .txtbttm { position:absolute; bottom:0px; background:#f9f9f9; padding:15px; border-top:1px solid #f0f0f0; text-transform:uppercase; font-size:9px; font-weight:bold; width:360px; text-align:right; }
  157. .txtbttm i { font-size:15px; color:#b8aeaa; margin-right:6px; float:left; }
  158. .txtbttm span { border-radius:6px; background:#F0F0F0; margin-top:15px; padding:5px; padding-left:110px; padding-right:90px; font-size:10px; text-align:center; border:1px solid #f0f0f0; font-weight:none; margin-bottom:13px; }
  159. .txtbttm span i { color:#b8aeaa; margin-left:5px; font-size:10px; margin-right:0px; float:none; }
  160.  
  161.  
  162. /*--------- STORY CODING ------------*/
  163. #stories { width:370px; height:70px; padding:13px; position:absolute; top:0px; right:0px; }
  164. .astory { float:left; width:50px; height:50px; border-radius:100%; background:#e9e9e9; padding:4px; margin:5px; margin-left:11px; cursor:pointer; }
  165. .astory img { border-radius:100%; width:50px; height:50px; }
  166. .astory:nth-child(1) { background:#b8aeaa; }
  167. .fullstory { position:absolute; width:390px; height:380px; bottom:0px; right:0px;background:#f9f9f9; padding-top:25px; display:none; z-index:9999; }
  168. .fullcontain img { width:200px; height:310px; }
  169. .fullcontain { background:#f9f9f9; width:200px; height:310px; position:absolute; top:0px; right:0px; left:0px; bottom:0px; margin:auto; animation:story 0.5s; }
  170. .full2, .full3, .full4 { position:absolute; top:0px; }
  171. .full2 { opacity:0; }
  172. .full3 { opacity:0; }
  173. .full4 { opacity:0; }
  174. .fullcontain:hover .full2 { opacity:1; transition-delay:1.5s; }
  175. .fullcontain:hover .full3 { opacity:1; transition-delay:3s; }
  176. .fullcontain:hover .full4 { opacity:1; transition-delay:4.5s; }
  177. .storyinfo { position:absolute; bottom:0px; left:0px; color:#fff; font-size:9px; letter-spacing:1px; background:rgba(0,0,0,0.3); padding:10px; width:180px; }
  178. .storyinfo b { font-weight:700; text-transform:uppercase; }
  179. @keyframes story { from { transform:scale(0.4); } to { transform:scale(1); } }
  180.  
  181. .fourimage { position:absolute; top:95px; left:0px; right:0px; margin:auto; color:#b8aeaa; font-size:11px; font-weight:700; cursor:pointer; line-height:10px; }
  182. .fourimage img { width:110px; height:110px; border-radius:100%; }
  183. .fourinfo { position:absolute; top:230px; left:90px; text-align:left; list-style-type:none; }
  184. .fourinfo i { color:#b8aeaa; font-size:18px; vertical-align:middle; margin-right:10px; margin-left:-30px; }
  185. .fourinfo li { margin:10px; border-bottom:1px solid #e9e9e9; width:200px; padding:2px; }
  186.  
  187. .fourbottom { position:absolute; bottom:0px; list-style-type:none; }
  188. .fourbottom li { width:109px; background:#f0f0f0; float:left; padding:10px; font-family:'roboto'; font-weight:700; font-size:8px; border-right:1px solid #e5e5e5; text-transform:uppercase; letter-spacing:1px; cursor:pointer; }
  189. .fourbottom li:nth-child(3) { border-right:none; }
  190. .fourbottom li:hover { background:#f5f5f5; }
  191.  
  192. .snap1txt { position:absolute; top:150px; left:25px; transform:rotate(-3deg); }
  193. .snap1txt span { font-family:arial; background:#f9f9f9; color:#1b1b1b; padding:2px; padding-left:5px; padding-right:5px; border-radius:4px; font-size:10px; font-weight:bold;}
  194.  
  195. /*--------------- PLAYLIST TAB ------------------*/
  196. .albumcover { position:absolute; left:25px; top:25px; }
  197. .albumcover img { width:120px; height:120px; border-radius:9px; }
  198. .playlistit { font-weight:bold;text-transform:uppercase; font-size:20px; margin-top:25px; margin-left:160px; text-align:left; width:205px; line-height:20px; }
  199. .playlistuser { margin-left:160px; margin-top:7px; text-align:left; }
  200. .playlistplays { margin-left:160px; margin-top:3px; text-align:left; }
  201.  
  202. .playlist { position:absolute; left:25px; top:160px; width:340px; text-align:left; }
  203. .playlist li { list-style-type:None; border-bottom:1px solid #f0f0f0; padding-bottom:8px; padding-top:8px; }
  204. .playlist li:last-child { border-bottom:0px; }
  205. .playnum { float:left; font-size:29px; font-weight:bold; margin-right:5px; margin-top:7px; color:#b8aeaa; }
  206. .playlist b { color:#b8aeaa; }
  207.  
  208.  
  209.  
  210. /*------------ CREDIT -------------*/
  211. #credit { position:fixed; bottom:11px; left:11px; background:#fff; width:17px; height:17px; border-radius:76px; padding:7px; font-size:7px; font-weight:bold; transition:0.4s; }
  212. #credit i { color:#aaa; font-size:16px; vertical-align:text-top; margin-right:5px; float:left; }
  213. #credit:hover { width:177px; transition:0.4s; }
  214. #credit:hover .crtext { opacity:1; transition:1.3s; }
  215. .crtext { width:150px; float:right; position:absolute; top:10px; right:9px; opacity:0; transition:0.3s; }
  216.  
  217.  
  218.  
  219. </style>
  220.  
  221.  
  222. <body>
  223. <div id="vcnilla">
  224.  
  225. <div class="tab">
  226. <button class="tablinks" onclick="openCity(event, 'First')" id="defaultOpen"><i class="icon-compass"></i><br>Overview</button>
  227. <button class="tablinks" onclick="openCity(event, 'Second')"><i class="icon-003-favorites"></i><br>Latest</button>
  228. <button class="tablinks" onclick="openCity(event, 'Third')"><i class="icon-004-chat"></i><br>Notifications</button>
  229. <button class="tablinks" onclick="openCity(event, 'Fourth')" style="height:124px;"><i class="icon-tape"></i><br>playlist</button>
  230. </div>
  231.  
  232.  
  233. <!------------------------ FIRST TAB ------------------------------>
  234. <div id="First" class="tabcontent">
  235.  
  236.  
  237. <div class="name"><span>First Middle Last</span></div>
  238.  
  239. <div class="firstimage"><img src="http://via.placeholder.com/340x340"></div>
  240.  
  241. <div class="desc"><i>crystal chandeliers</i> shattered shining on the marble floor, <b>rosé</b> inside champagne flutes, <b>blood red seeds</b> and half-dried fruits</div>
  242.  
  243. </div>
  244.  
  245.  
  246.  
  247.  
  248.  
  249.  
  250. <!------------------------ SECOND TAB ---------------------------->
  251. <div id="Second" class="tabcontent">
  252.  
  253.  
  254.  
  255. <!--------------------- STORY CODING ------------------>
  256. <div id="stories">
  257. <div class="astory story1"><img src="http://via.placeholder.com/50x50"></div>
  258. <div class="astory"><img src="http://via.placeholder.com/50x50"></div>
  259. <div class="astory"><img src="http://via.placeholder.com/50x50"></div>
  260. <div class="astory"><img src="http://via.placeholder.com/50x50"></div>
  261. <div class="astory"><img src="http://via.placeholder.com/50x50"></div>
  262. </div>
  263.  
  264. <!------------------ CURRENT STORY -------------------->
  265. <div class="fullstory">
  266. <div class="fullcontain">
  267. <div class="storyinfo"><b>@username</b> 22h</div>
  268. <img src="http://via.placeholder.com/200x310">
  269.  
  270. <div class="full2">
  271. <div class="storyinfo"><b>@username</b> 10h</div>
  272. <img src="http://via.placeholder.com/200x310"></div>
  273.  
  274. <div class="full3">
  275. <div class="storyinfo"><b>@username</b> 5h</div>
  276. <img src="http://via.placeholder.com/200x310"></div>
  277.  
  278. <div class="full4">
  279. <div class="storyinfo"><b>@username</b> 1h</div>
  280. <img src="http://via.placeholder.com/200x310"></div>
  281.  
  282. </div></div>
  283.  
  284. <!-------------------------- FULL INSTAGRAM FEED ------------------------>
  285.  
  286. <div id="scontainer">
  287.  
  288.  
  289.  
  290. <!---- TO ADD MORE POSTS COPY FROM HERE ---->
  291. <div class="post">
  292. <div class="postinfo">
  293.  
  294. <div class="poststats">
  295. <i class="icon-like-love-streamline"></i> ### LIKES
  296. <i class="icon-004-chat"></i> ### COMMENTS
  297. </div>
  298.  
  299. </div>
  300. <img src="http://via.placeholder.com/340x340">
  301. <div class="postdesc"><span>USERNAME</span> description</div>
  302. </div>
  303.  
  304. <!----- TO HERE & PASTE IT RIGHT UNDER THIS TAG ----->
  305.  
  306.  
  307.  
  308. </div></div>
  309.  
  310.  
  311.  
  312.  
  313.  
  314. <!------------------------- THIRD TAB --------------------------->
  315. <div id="Third" class="tabcontent">
  316.  
  317. <div class="tab1">
  318.  
  319. <button class="tablinks1" onclick="openCity1(event, 'Innerthree')"><i class="icon-inbox"></i><br>MESSAGES</button>
  320. <button class="tablinks1" onclick="openCity1(event, 'Innerfour')" id="defaultOpen1"><i class="icon-mail"></i><br>NEW MSG ALERT</button>
  321. </div>
  322.  
  323. <!------------------- MESSAGES --------------------->
  324.  
  325. <div id="Innerthree" class="tabcontent1">
  326.  
  327. <div class="directmsgs">
  328. <div class="mssgsearch"><i class="fa fa-search" aria-hidden="true"></i> SEARCH DIRECT MESSAGES </div> <i class="fa fa-envelope-open-o" aria-hidden="true" style="margin-top:-35px; font-size:20px; margin-left:152px; font-weight:none; position:absolute;"></i>
  329.  
  330. <ul>
  331. <li><img src="http://via.placeholder.com/50x50"> <b>contact name</b>
  332. <br><b>NAME:</b> message goes here</li>
  333.  
  334. <li><img src="http://via.placeholder.com/50x50"> <b>contact name</b>
  335. <br><b>NAME:</b> message goes here</li>
  336.  
  337. <li><img src="http://via.placeholder.com/50x50"> <b>contact name</b>
  338. <br><b>NAME:</b> message goes here</li>
  339.  
  340. <li><img src="http://via.placeholder.com/50x50"> <b>contact name</b>
  341. <br><b>NAME:</b> message goes here</li>
  342.  
  343. <li><img src="http://via.placeholder.com/50x50"> <b>contact name</b>
  344. <br><b>NAME:</b> message goes here</li>
  345.  
  346. <li><img src="http://via.placeholder.com/50x50"> <b>contact name</b>
  347. <br><b>NAME:</b> message goes here</li>
  348.  
  349.  
  350. </div></div>
  351.  
  352. <!------------------- MESSAGE TAB -------------------->
  353.  
  354. <div id="Innerfour" class="tabcontent1">
  355. <div class="directmsg">
  356. <div class="mssgrec">
  357. <i class="fa fa-user" aria-hidden="true"></i> CONTACT NAME</div>
  358.  
  359. <div class="textcontain">
  360. <div class="lefttxt">first message</div>
  361. <div class="righttxt">second message</div>
  362. <div class="lefttxt">third message</div>
  363. <div class="righttxt">fourth message</div>
  364. </div>
  365.  
  366. <div class="txtbttm">
  367. <i class="fa fa-camera" aria-hidden="true"></i>
  368. <i class="fa fa-heart" aria-hidden="true"></i>
  369.  
  370. <span>Type a message <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span></div>
  371.  
  372. </div></div></div>
  373.  
  374.  
  375.  
  376.  
  377.  
  378.  
  379. <!------------------------- FOURTH TAB ---------------------------->
  380. <div id="Fourth" class="tabcontent" >
  381. <div class="albumcover"><img src="http://via.placeholder.com/120x120"></div>
  382. <div class="playlistit">playlist title goes here</div>
  383. <div class="playlistuser">username</div>
  384. <div class="playlistplays">### plays</div>
  385.  
  386. <div class="playlist">
  387. <li><div class="playnum">1</div>
  388. <b>SONG NAME</b>
  389. <br>artist
  390. </li>
  391.  
  392.  
  393. <li><div class="playnum">2</div>
  394. <b>SONG NAME</b>
  395. <br>artist
  396. </li>
  397.  
  398.  
  399. <li><div class="playnum">3</div>
  400. <b>SONG NAME</b>
  401. <br>artist
  402. </li>
  403.  
  404.  
  405. <li><div class="playnum">4</div>
  406. <b>SONG NAME</b>
  407. <br>artist
  408. </li>
  409.  
  410.  
  411. <li><div class="playnum">5</div>
  412. <b>SONG NAME</b>
  413. <br>artist
  414. </li>
  415.  
  416.  
  417. <li><div class="playnum">6</div>
  418. <b>SONG NAME</b>
  419. <br>artist
  420. </li>
  421.  
  422.  
  423. <li><div class="playnum">7</div>
  424. <b>SONG NAME</b>
  425. <br>artist
  426. </li>
  427.  
  428. </div>
  429. </div>
  430.  
  431.  
  432.  
  433.  
  434. <!-- CREDIT - DO NOT DELETE -->
  435. <div id="creditbox">
  436. <a class="tooltip" href="http://vcnilla.tumblr.com/">
  437. <div id="credit">
  438. <i class="icon-001-like"></i> <div class="crtext">CODE BY JCKIEBURKHART & STEVENHYD </div</div>
  439. </a></div>
  440.  
  441.  
  442.  
  443.  
  444. </div><!----------THIS IS WHERE THE ENTIRE CONTAINER ENDS------------>
  445.  
  446.  
  447. <script>
  448. function openCity(evt, cityName) {
  449. var i, tabcontent, tablinks;
  450. tabcontent = document.getElementsByClassName("tabcontent");
  451. for (i = 0; i < tabcontent.length; i++) {
  452. tabcontent[i].style.display = "none";
  453. }
  454. tablinks = document.getElementsByClassName("tablinks");
  455. for (i = 0; i < tablinks.length; i++) {
  456. tablinks[i].className = tablinks[i].className.replace(" active", "");
  457. }
  458. document.getElementById(cityName).style.display = "block";
  459. evt.currentTarget.className += " active";
  460. }
  461.  
  462. // Get the element with id="defaultOpen" and click on it
  463. document.getElementById("defaultOpen").click();
  464.  
  465. // document.addEventListener('contextmenu', event => event.preventDefault()); //
  466.  
  467. </script>
  468.  
  469.  
  470. <script>
  471. function openCity1(evt, cityName1) {
  472. var i, tabcontent1, tablinks1;
  473. tabcontent1 = document.getElementsByClassName("tabcontent1");
  474. for (i = 0; i < tabcontent1.length; i++) {
  475. tabcontent1[i].style.display = "none";
  476. }
  477. tablinks1 = document.getElementsByClassName("tablinks1");
  478. for (i = 0; i < tablinks1.length; i++) {
  479. tablinks1[i].className = tablinks1[i].className.replace(" active", "");
  480. }
  481. document.getElementById(cityName1).style.display = "block";
  482. evt.currentTarget.className += " active";
  483. }
  484.  
  485. // Get the element with id="defaultOpen" and click on it
  486. document.getElementById("defaultOpen1").click();
  487.  
  488. // document.addEventListener('contextmenu', event => event.preventDefault()); //
  489.  
  490. </script>
  491.  
  492.  
  493. <script>
  494. $(document).ready(function(){
  495. $(".story1").click(function(){
  496. $(".fullstory").fadeToggle(300);
  497. });
  498. });
  499. </script>
  500.  
  501.  
  502. </body>
  503. </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!