API tools faq
paste
Advertisement
vcnillacodes

SOCIALS / JCKIEBURKART & STEVENHYD

vcnillacodes
Sep 2nd, 2018
4,401
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 39.25 KB | None | 0 0
raw download clone embed print report
  1. <!-- SOCIALS PAGE BY VCNILLA -->
  2.  
  3. <!DOCTYPE html>
  4. <html><head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
  5.  
  6. <title>TITLE GOES HERE </title>
  7. <link rel="shortcut icon" href="{Favicon}">
  8.  
  9.  
  10. <!----------------------------SCRIPTS----------------------->
  11.  
  12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  13. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  14. <script>(function($){ $(document).ready(function() { $("a[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:20, tip_fade_speed:200, attribute:"title" }); }); })(jQuery);</script>
  15. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  16. <link rel="stylesheet" href="hint.css">
  17. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Roboto:100,300,400,200,700|Lato:400,700|' rel='stylesheet' type='text/css'>
  18. <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700,900' rel='stylesheet' type='text/css'>
  19. <link href="https://fonts.googleapis.com/css?family=Heebo:100,300,400,500" rel="stylesheet">
  20. <link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">
  21. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  22. <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
  23. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  24. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
  25. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css"> </head>
  26.  
  27. <style type="text/css">
  28.  
  29. /*----------------------------SCROLL-----------------------*/
  30. ::-webkit-scrollbar {width: 0px; height: 4px;}
  31. ::-webkit-scrollbar-thumb { background-color: #d9d9d9;}
  32.  
  33. /*----------------------------TOOLTIPS-----------------------*/
  34. #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: roboto; background: #f5f5f5; border:1px solid #e5e5e5; border-radius:3px; z-index:99999; font-size:7px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; }
  35.  
  36. /*----------------------------BODY-----------------------*/
  37. body { color:#949494; background-color:#e7e7e7; line-height:14px; text-align:justify; font-family:'roboto'; font-size: 10px; letter-spacing:0.5px; }
  38.  
  39. #vcnilla { width:650px; height:500px; position: absolute; top:0; bottom:0px; left:0; right:0; margin:auto; background:#f3f3f3; text-align:justify; overflow:hidden; border-radius:15px; }
  40.  
  41. /*----------------------------LINKS-----------------------*/
  42. a:link, a:active, a:visited { color: #aaa; text-decoration:none; }
  43. a:hover { color:#aaa; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;}
  44.  
  45. /*----------------------------CREDIT-----------------------*/
  46. #credit { position:fixed; bottom:13px; left:13px; background:#beced1; padding:5px; font-size:10px; color:#fff; font-weight:bold; font-family:'inconsolata'; text-transform:lowercase; border-radius:6px; }
  47.  
  48. /*----------------------------TABS-----------------------*/
  49.  
  50. #topright { padding:8px; padding-right:10px; float: right; opacity:0.8; cursor: pointer; font-size:11px; text-transform:uppercase; font-family:'karla'; z-index:999; position:absolute; top:0px; right:0px; }
  51.  
  52. #topright:hover { opacity:0.8 }
  53.  
  54. div.tab .tablinks { border:none; cursor: pointer; outline:none; display: block; }
  55.  
  56. .tabcontent { width:650px; position:absolute; height:500px; left:0px; top:0px; z-index:999999; display:none; background:#f2f2f2; animation: fadeEffect 0.4s; border-radius:15px }
  57.  
  58. @-webkit-keyframes fadeEffect { from { opacity:0; transform:scale(0.5); } to {opacity:1; transform:scale(1); } }
  59.  
  60. @keyframes fadeEffect { from { opacity:0; transform:scale(0.5); } to {opacity:1; transform:scale(1); } }
  61.  
  62. @-webkit-keyframes widget { from { opacity:0; transform:scale(0.5); } to {opacity:1; transform:scale(1); } }
  63.  
  64. @keyframes widget { from { opacity:0; transform:scale(0.5); } to {opacity:1; transform:scale(1); } }
  65.  
  66. /*----------------------------WIDGETS-----------------------*/
  67.  
  68. .widget { background:#fff; width:190px; height:210px; border-radius:10px; left:230px; top:20px; position:absolute; animation: widget 0.6s; text-align:center; overflow:hidden; }
  69.  
  70. .widget2 { background:#fff; width:190px; height:210px; border-radius:10px; top:20px; position:absolute; left:230px; animation: widget 0.6s; }
  71.  
  72. .widget3 { background:#fff; width:190px; height:135px; border-radius:10px; top:20px; position:absolute; right:22px; animation: widget 0.6s; }
  73.  
  74. .widget4 { background:#eee; width:220px; height:45px; border-radius:5px; left:20px; top:20px; position:absolute; animation: widget 0.6s; }
  75.  
  76. .widget5 { background:#fff; width:190px; height:235px; border-radius:10px; top:245px; position:absolute; left:230px; animation: widget 0.6s; }
  77.  
  78. .widget6 { background:#fff; width:190px; height:270px; border-radius:10px; position:absolute; left:20px; top:20px; animation: widget 0.6s;
  79.  
  80. /* MAIN IMAGE SIZE 190x270px */ background:url('https://78.media.tumblr.com/7939ada1ffc61eb1469cc381260d5391/tumblr_inline_pefvj1F74s1up3973_540.png'); }
  81.  
  82. .widget7 { background:#fff; width:190px; height:175px; border-radius:10px; position:absolute; left:20px; top:305px; animation: widget 0.6s; }
  83.  
  84. .widget8 { background:#fff; width:190px; height:310px; border-radius:10px; position:absolute; left:440px; top:170px; animation: widget 0.6s; }
  85.  
  86. /*----------------------------CODING BEGINS-----------------------*/
  87.  
  88. /*----------------------------NAME BOX-----------------------*/
  89. .widget7 i { font-size:15px; background:#beced1; color:#fff; width:15px; height:15px; position:absolute; top:10px; left:10px; padding:5px; border-radius:5px; }
  90.  
  91. .widget7name { width:143px; position:absolute; text-align:left; top:8px; right:5px; font-weight:700; color:#beced1; font-family:'montserrat'; text-transform:uppercase; font-size:7px; letter-spacing:2px; }
  92.  
  93. .widget7name span { background:#ccc; color:#fff; letter-spacing:1px; padding:2px; border-radius:3px; padding-left:4px; padding-right:4px; }
  94.  
  95. .widget7username { width:190px; position:absolute; right:0px; top:92px; font-family:'roboto'; font-size:17px; font-weight:300; text-align:center; z-index:99; }
  96.  
  97. .widget7username span { background:#beced1; color:#fff; letter-spacing:1px; padding:2px; border-radius:3px; padding-left:10px; padding-right:10px; font-family:'montserrat'; text-transform:uppercase; font-size:7px; letter-spacing:2px; font-weight:700; }
  98.  
  99. .widget7desc { top:50px; left:10px; width:135px; height:80px; border-radius:5px; text-align:center; font-family:'karla'; text-transform:uppercase; font-size:8px; letter-spacing:1px; font-weight:700; color:#aaa; line-height:10px; background:#f9f9f9; opacity:0.9; padding:17px; text-align:justify; position:absolute; }
  100.  
  101. /*----------------------------PLAYLIST-----------------------*/
  102. .widget5 i { font-size:15px; background:#beced1; color:#fff; width:15px; height:15px; position:absolute; top:10px; left:10px; padding:5px; border-radius:5px; }
  103.  
  104. .widget5name { width:143px; position:absolute; text-align:left; top:8px; right:5px; font-weight:700; color:#beced1; font-family:'montserrat'; text-transform:uppercase; font-size:7px; letter-spacing:2px; }
  105.  
  106. .widget5name span { background:#ccc; color:#fff; letter-spacing:1px; padding:2px; border-radius:3px; padding-left:4px; padding-right:4px; }
  107.  
  108. .widget5username { width:190px; position:absolute; right:0px; top:192px; font-family:'roboto'; font-size:17px; font-weight:300; text-align:center; z-index:99; }
  109.  
  110. .widget5username span { background:#beced1; color:#fff; letter-spacing:1px; padding:2px; border-radius:3px; padding-left:10px; padding-right:10px; font-family:'montserrat'; text-transform:uppercase; font-size:7px; letter-spacing:2px; font-weight:700; }
  111.  
  112. .widget5desc { top:50px; left:10px; text-align:center; width:170px; height:130px; position:absolute; border-radius:5px;
  113.  
  114. /* THIS IS THE PLAYLIST COVER - 170x130px */
  115. background:url('https://78.media.tumblr.com/a8c2ea1cc6ef9e42093469aa2b1c383c/tumblr_inline_pefumpydWO1up3973_540.png'); }
  116.  
  117.  
  118. /*----------------------------TWITTER-----------------------*/
  119.  
  120. /*----------------------------WIDGET-----------------------*/
  121.  
  122. .widget3 i { font-size:15px; background:#beced1; color:#fff; width:15px; height:15px; position:absolute; top:10px; left:10px; padding:5px; border-radius:5px; }
  123.  
  124. .widget3name { width:143px; position:absolute; text-align:left; top:8px; right:5px; font-weight:700; color:#beced1; font-family:'montserrat'; text-transform:uppercase; font-size:7px; letter-spacing:2px; }
  125.  
  126. .widget3name span { background:#ccc; color:#fff; letter-spacing:1px; padding:2px; border-radius:3px; padding-left:4px; padding-right:4px; }
  127.  
  128. .widget3icon { position:absolute; z-index:999; width:190px;}
  129.  
  130. .widget3icon img { width:45px; height:45px; margin-top:140px; border-radius:76px; margin-left:20px; border:4px solid #f7f7f7; }
  131.  
  132. .widget3username { width:190px; position:absolute; right:0px; top:160px; font-family:'roboto'; font-size:17px; font-weight:300; text-align:center; z-index:99; }
  133.  
  134. .widget3username span { background:#beced1; color:#fff; letter-spacing:1px; padding:2px; border-radius:3px; padding-left:4px; padding-right:4px; font-family:'montserrat'; text-transform:uppercase; font-size:7px; letter-spacing:2px; font-weight:700; }
  135.  
  136. .widget3desc { top:50px; text-align:center; font-family:'karla'; text-transform:uppercase; font-size:7px; letter-spacing:1px; font-weight:700; color:#aaa; line-height:10px; background:#f9f9f9; opacity:0.9; padding:17px; text-align:justify; padding-bottom:15px; height:60px; padding-top:15px; position:absolute; }
  137.  
  138. .widget3 ul { margin-top:55px; padding-left:13px; font-weight:700; text-transform:uppercase; font-size:8px; }
  139.  
  140. .widget3 ul li:hover { font-style:italic; letter-spacing:1px; font-size:9px; color:#beced1; }
  141.  
  142. .widget3 ul li { width:170px; list-style-type:none; margin-top:6px; border-bottom:1px solid #f3f3f3; padding-bottom:5px; }
  143.  
  144. .widget3 ul li span { color:#ccc; }
  145.  
  146. .widget3 ul li:nth-last-child(1) { border-bottom:none; }
  147.  
  148. /*----------------------------TAB-----------------------*/
  149.  
  150. #sidebar { background:#fff; width:210px; height:100%; position:absolute; left:0px; top:0px; z-index:99; }
  151.  
  152. #sidebar img { border:4px solid #fff; box-shadow:2px 2px 0px #f6f6f6; border-radius:100%; position:absolute; top:70px; width:110px; left:140px; }
  153.  
  154. .profilename { font-family:roboto; font-size:30px; letter-spacing:-1px; font-weight:200; position:absolute; text-align:right; width:100px; top:105px; right:85px; }
  155.  
  156. .profilename2 { font-family:montserrat; font-size:10px; letter-spacing:1px; font-weight:700; position:absolute; text-align:right; width:100px; top:125px; right:85px; text-transform:uppercase; }
  157.  
  158. .followbutt { background:#beced1; width:90px; font-family:'karla'; font-weight:bold; text-transform:uppercase; font-size:8px; letter-spacing:2px; color:#fff; padding:2px; text-align:center; border-radius:15px; position:absolute; top:145px; right:85px; cursor:pointer; border:1px solid transparent; }
  159.  
  160. .followbutt:hover { background:#fff; color:#beced1; border:1px solid #beced1; }
  161.  
  162. #profiledesc { font-family:'karla'; margin:20px; text-align:justify; margin-top:200px; }
  163.  
  164. #stats { width:243px; margin-top:30px; }
  165.  
  166. #stats li { list-style-type:none; margin:20px; height:16px; text-align:right; font-family:montserrat; font-weight:none; text-transform:uppercase; letter-spacing:1px; font-size:7px; margin-top:15px; }
  167.  
  168. #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:-7px; border:1px solid #f2f2f2; color:#beced1; }
  169.  
  170. #stats i::after { content:""; width:30px; height:1px; background:#f1f1f1; position:absolute; margin-top:-7px; margin-left:-50px; }
  171.  
  172. /*-------------------------FEED----------------------*/
  173. #tweetfeed { position:absolute; width:350px; height:445px; right:15px; top:0px; overflow:auto; padding-left:70px; padding-top:30px; }
  174.  
  175. .atweet { background:#fff; width:330px; height:auto; margin-bottom:35px; padding-bottom:8px; text-align:justify; border-radius:5px; }
  176.  
  177. .tweeticon img { width:30px; border-radius:100%; margin:10px; }
  178.  
  179. .tweetcontent { font-size:9px; margin-left:10px; margin-right:10px; line-height:13px; }
  180.  
  181. .tweetuser { width:150px; height:34px; font-size:11px; line-height:13px; position:relative; margin-top:-40px; margin-left:45px; }
  182.  
  183. .tweetuser b { font-size:12px; color:#beced1; }
  184.  
  185. .tweetimages { margin-left:10px; margin-top:8px; }
  186.  
  187. .tweetoverlay { background:#fff; width:246px; 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; }
  188.  
  189. .atweet:hover .tweetoverlay { opacity:0.9; margin-top:-44px; transition:0.5s; }
  190.  
  191. .tweetoverlay i { font-size:9px; margin-top:-2px; vertical-align:middle; color:#eed7d7; }
  192.  
  193. .likeretweet { width:330px; text-align:center; height:15px; }
  194.  
  195. .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; }
  196.  
  197. .likeretweet i:hover { background:#beced1; border:1px solid #beced1; color:#fff; }
  198.  
  199. /*----------------------------INSTAGRAM-----------------------*/
  200.  
  201. /*----------------------------WIDGET-----------------------*/
  202. .widget i { font-size:15px; background:#beced1; color:#fff; width:15px; height:15px; position:absolute; top:10px; left:10px; padding:5px; border-radius:5px; }
  203.  
  204. .widget1name { width:143px; position:absolute; text-align:left; top:8px; right:5px; font-weight:700; color:#beced1; font-family:'montserrat'; text-transform:uppercase; font-size:7px; letter-spacing:2px; }
  205.  
  206. .widget1name span { background:#ccc; color:#fff; letter-spacing:1px; padding:2px; border-radius:3px; padding-left:4px; padding-right:4px; }
  207.  
  208. .widget1icon { position:absolute; z-index:999; width:190px;}
  209.  
  210. .widget1icon img { margin-top:50px; width:55px; border-radius:76px; border:4px solid #f7f7f7; }
  211.  
  212. .widgetusername { width:190px; position:absolute; right:0px; top:119px; font-family:'roboto'; font-size:17px; font-weight:300; text-align:center; z-index:99; }
  213.  
  214. .widgetusername span { background:#beced1; color:#fff; letter-spacing:1px; padding:2px; border-radius:3px; padding-left:4px; padding-right:4px; font-family:'montserrat'; text-transform:uppercase; font-size:7px; letter-spacing:2px; font-weight:700; }
  215.  
  216. .widget1desc { top:80px; text-align:center; font-family:'karla'; text-transform:uppercase; font-size:8px; letter-spacing:1px; font-weight:700; color:#aaa; line-height:10px; background:#f9f9f9; opacity:0.9; padding:17px; text-align:justify; padding-bottom:50px; padding-top:85px; position:absolute; }
  217.  
  218. /*----------------------------TAB-----------------------*/
  219. #igsidebar { background:#fff; width:210px; height:100%; position:absolute; right:0px; top:0px; z-index:9; border-top-right-radius:15px; border-bottom-right-radius:15px; }
  220.  
  221. #igsidebar img { border:4px solid #fff; box-shadow:2px 2px 0px #f6f6f6; border-radius:10px; position:absolute; top:85px; border-radius:100px; right:150px; width:80px; }
  222.  
  223. .igprofilename { font-family:roboto; font-size:30px; letter-spacing:-1px; font-weight:200; position:absolute; text-align:left; width:110px; top:105px; left:75px; }
  224.  
  225. .igprofilename2 { font-family:montserrat; font-size:10px; letter-spacing:1px; font-weight:700; position:absolute; text-align:left; width:110px; top:125px; left:75px; text-transform:uppercase; }
  226.  
  227. .igfollowbutt { background:#beced1; width:90px; font-family:'karla'; font-weight:bold; text-transform:uppercase; font-size:8px; letter-spacing:2px; color:#fff; padding:2px; text-align:center; border-radius:5px; position:absolute; top:145px; left:75px; cursor:pointer; border:1px solid transparent; }
  228.  
  229. .igfollowbutt:hover { background:#fff; color:#beced1; border:1px solid #beced1; }
  230.  
  231. #igprofiledesc { font-family:'karla'; margin:20px; text-align:justify; margin-top:200px; }
  232.  
  233. #igstats { width:243px; margin-top:30px; }
  234.  
  235. #igstats li { list-style-type:none; margin:20px; height:16px; text-align:left; font-family:montserrat; font-weight:none; text-transform:uppercase; letter-spacing:1px; font-size:7px; margin-top:15px; padding-left:30px; }
  236.  
  237. #igstats i { background:#fff; float:left; font-size:13px; width:13px; height:13px; padding:7px; border-radius:100%; vertical-align:bottom; margin-left:-65px; margin-top:-7px; border:1px solid #f2f2f2; color:#beced1; }
  238.  
  239. #igstats i::after { content:""; width:30px; height:1px; background:#f1f1f1; position:absolute; margin-top:-7px; margin-left:20px; }
  240.  
  241. /*----------------------------FEED-----------------------*/
  242. #igfeed { position:absolute; top:0px; left:0px; width:400px; height:490px; }
  243.  
  244. .igpost { border-radius:7px; background:#fff; box-shadow:2px 2px 0px #f6f6f6; width:160px; height:225px; float:left; margin-left:32px; margin-top:15px; overflow:hidden; text-align:left; }
  245.  
  246. .iguser2 { font-family:'roboto'; font-size:9px; font-weight:700; padding-left:5px; padding-right:5px; text-transform:uppercase; }
  247.  
  248. .iguser2 i { float:right; font-weight:300; text-transform:lowercase; }
  249.  
  250. .igpostdsc { font-size:8px; line-height:10px; margin:7px; text-align:justify; }
  251.  
  252. /*-------------------------IPHONE----------------------*/
  253.  
  254. /*----------------------------TAB-----------------------*/
  255.  
  256. /*-------------------------SNAPCHAT----------------------*/
  257. #snap { background:#e9e9e9; border-radius:5px; margin-left:20px; margin-top:180px; width:220px; height:300px; position:absolute; overflow:hidden; }
  258.  
  259. .txt { margin:20px; line-height:15px; }
  260.  
  261. #snap img { border-radius:0px; width:220px; height:300px; }
  262.  
  263. #s1 { opacity:0; position:absolute; }
  264.  
  265. #s2 { opacity:0; position:absolute; }
  266.  
  267. #s3{ opacity:0; position:absolute; }
  268.  
  269. #snap:hover #s1 { opacity:1; transition-delay:1s; }
  270.  
  271. #snap:hover #s2 { opacity:1; transition-delay:2.5s; }
  272.  
  273. #snap:hover #s3 { opacity:1; transition-delay:4s; }
  274.  
  275. .username { color:#f3f3f3; font-weight:bold; text-shadow:1px 1px 2px #909090; position:absolute; top:7px; letter-spacing:1px; left:7px; text-transform:uppercase; z-index:9999; }
  276.  
  277. .caption { position:absolute; background:rgba(0, 0, 0, 0.5); width:215px; padding:3px; text-align:center; top:245px; color:#f5f5f5; letter-spacing:1px; font-size:10px; font-family:'heebo'; font-weight:100; text-transform:none; line-height:9px; padding-top:6px; }
  278.  
  279. .timeago { color:#f5f5f5; position:absolute; text-shadow:0px 0px 3px #aaa; top:20px; letter-spacing:2px; left:7px; text-transform:uppercase; font-weight:bold; font-size:7px; }
  280.  
  281. /*-------------------------IMESSAGES----------------------*/
  282. .widget4left { background:#f7f7f7; position:absolute; left:0px; width:350px; height:500px; }
  283.  
  284. .widget4right { background:#fff; position:absolute; right:0px; width:390px; height:500px; top:0px; border-radius:5px; border-left:1px solid #f0f0f0; }
  285.  
  286. .text2 { background:#f9f9f9; padding:20px; border-bottom:1px solid #f0f0f0; text-transform:uppercase; font-size:9px; font-weight:bold; }
  287.  
  288. .textcontain { width:390px; height:380px; font-weight:none; overflow:auto; }
  289.  
  290. .texttime { text-align:center; margin-top:15px; letter-spacing:2px; font-size:8px; opacity:0.8; text-transform:uppercase }
  291.  
  292. .lefttxt { background:#f3f3f3; padding:7px; border-radius:10px; margin:20px; max-width:60%; font-size:9px; border-bottom-left-radius:0px; }
  293.  
  294. .righttxt { background:#beced1; padding:6px; border-radius:10px; margin:20px; max-width:60%; font-size:9px; color:#fff; margin-left:130px; border-bottom-right-radius:0px; }
  295.  
  296. .txtbttm { position:absolute; bottom:0px; background:#f9f9f9; padding:12px; border-top:1px solid #f0f0f0; text-transform:uppercase; font-size:9px; font-weight:bold; width:370px; text-align:right; border-bottom-left-radius:5px; border-bottom-right-radius:5px; }
  297.  
  298. .txtbttm i { font-size:15px; color:#beced1; margin-right:6px; float:left; }
  299.  
  300. .txtbttm span { border-radius:6px; background:#fff; margin-top:15px; padding:5px; padding-left:125px; padding-right:105px; font-size:9px; text-align:center; border:1px solid #f0f0f0; margin-bottom:13px; margin-left:10px; }
  301.  
  302. .txtbttm span i { color:#beced1; margin-left:25px; font-size:9px; margin-right:0px; float:none; }
  303.  
  304. /*-------------------------NOTIFS----------------------*/
  305. .notifs1 { background:#eee; width:220px; height:45px; border-radius:5px; left:20px; top:20px; position:absolute; animation: widget 0.6s; }
  306.  
  307. .notifs1 i { font-size:15px; background:#beced1; color:#fff; width:15px; height:15px; position:absolute; top:10px; left:10px; padding:5px; border-radius:5px; }
  308.  
  309. .notifs1name { width:173px; position:absolute; text-align:left; top:8px; right:5px; font-weight:700; color:#beced1; font-family:'montserrat'; text-transform:uppercase; font-size:7px; letter-spacing:2px; }
  310.  
  311. .notifs1name span { background:#ccc; color:#fff; letter-spacing:1px; padding:2px; border-radius:3px; padding-left:4px; padding-right:4px; }
  312.  
  313. .notifs2 { background:#eee; width:220px; height:45px; border-radius:5px; left:20px; top:70px; position:absolute; animation: widget 0.6s; }
  314.  
  315. .notifs2 i { font-size:15px; background:#beced1; color:#fff; width:15px; height:15px; position:absolute; top:10px; left:10px; padding:5px; border-radius:5px; }
  316.  
  317. .notifs2name { width:173px; position:absolute; text-align:left; top:8px; right:5px; font-weight:700; color:#beced1; font-family:'montserrat'; text-transform:uppercase; font-size:7px; letter-spacing:2px; }
  318.  
  319. .notifs2name span { background:#ccc; color:#fff; letter-spacing:1px; padding:2px; border-radius:3px; padding-left:4px; padding-right:4px; }
  320.  
  321. .notifs3 { background:#eee; width:220px; height:45px; border-radius:5px; left:20px; top:120px; position:absolute; animation: widget 0.6s; }
  322.  
  323. .notifs3 i { font-size:15px; background:#beced1; color:#fff; width:15px; height:15px; position:absolute; top:10px; left:10px; padding:5px; border-radius:5px; }
  324.  
  325. .notifs3name { width:173px; position:absolute; text-align:left; top:8px; right:5px; font-weight:700; color:#beced1; font-family:'montserrat'; text-transform:uppercase; font-size:7px; letter-spacing:2px; }
  326.  
  327. .notifs3name span { background:#ccc; color:#fff; letter-spacing:1px; padding:2px; border-radius:3px; padding-left:4px; padding-right:4px; }
  328.  
  329. /*-------------------------WIDGET----------------------*/
  330. /* THIS IS THE IPHONE LOCKSCREEN - SIZE 190 x 310px */
  331. .widget8 { overflow:hidden; background:url('https://78.media.tumblr.com/8f096b61ed62fb44252400382c0f6952/tumblr_inline_pefsuwX1LY1up3973_540.png');}
  332.  
  333. .remindertop2 { width:190px; height:60px; background:transparent; position:absolute; top:40px; }
  334.  
  335. .reminderinfo2 { position:absolute; width:190px; top:35px; left:0px; z-index:99; font-size:40px; padding-top:12px;font-weight:300; color:#fff; letter-spacing:0px; text-align:center; }
  336.  
  337. .reminderinfo2 b { font-size:9px; left:12px; letter-spacing:2px; }
  338.  
  339. .widget8 prov { font-size:9px; background:transparent; width:25px; height:25px; position:absolute; top:4px; left:5px; color:#fff; padding:6px; z-index:9; border-radius:100px; }
  340.  
  341. .widget8 signal { font-size:10px; background:transparent; width:25px; height:25px; position:absolute; top:5px; left:160px; color:#fff; padding:6px; z-index:9; border-radius:100px; }
  342.  
  343. .widget8 wifi { font-size:10px; background:transparent; width:25px; height:25px; position:absolute; top:5px; left:50px; color:#fff; padding:6px; z-index:9; border-radius:100px; }
  344.  
  345. .widget8 uh { font-size:10px; background:transparent; width:25px; height:25px; position:absolute; top:285px; left:100px; color:#fff; padding:6px; z-index:9; border-radius:100px; }
  346.  
  347. .widget8 dots { font-size:20px; background:transparent; width:25px; height:25px; position:absolute; top:282px; left:80px; color:#fff; padding:6px; z-index:9; border-radius:100px; }
  348.  
  349. .timedate { width:143px; position:absolute; text-align:left; top:204px; right:-5px; font-weight:700; color:#beced1; font-family:'montserrat'; text-transform:uppercase; font-size:7px; letter-spacing:2px; }
  350.  
  351. .timedate span { background:#ccc; color:#fff; letter-spacing:1px; padding:2px; border-radius:3px; padding-left:4px; padding-right:4px; }
  352.  
  353. </style>
  354.  
  355. <!----------------THIS IS WHERE THE WIDGET EDITING IS--------------------->
  356.  
  357. <body><div id="vcnilla">
  358. <div class="tab">
  359.  
  360. <!--------------------INSTAGRAM WIDGET--------------------->
  361. <div class="tablinks" onclick="openCity(event, '1')">
  362. <div class="widget">
  363. <i class="fa fa-instagram" aria-hidden="true"></i>
  364.  
  365. <div class="widget1name">
  366. instagram <br><span> +100 new notifications </span></div>
  367.  
  368. <div class="widget1icon">
  369.  
  370. <!-- IMAGE WILL AUTO RESIZE -->
  371. <img src="https://78.media.tumblr.com/bb5fe1f66946028a5d071b9409018ff1/tumblr_inline_peftbaROs21up3973_540.png"></div>
  372.  
  373. <div class="widgetusername">
  374. @username
  375. <br><span>NAME HERE</span></div>
  376.  
  377. <div class="widget1desc">here is ur insta desc!!! 3 lines looks ideal but 2 is okay too. </div></div></div>
  378.  
  379.  
  380. <!--------------------TWITTER WIDGET--------------------->
  381. <div class="tablinks" onclick="openCity(event, '3')">
  382. <div class="widget3">
  383.  
  384. <i class="fa fa-twitter" aria-hidden="true"></i>
  385.  
  386. <div class="widget3name">
  387. twitter <br><span>currently trending</span></div>
  388.  
  389. <ul> <!-- TRENDING -->
  390. <li><span>1.</span> #HASHTAG</li>
  391. <li><span>2.</span> #HASHTAG</li>
  392. <li><span>3.</span> #HASHTAG</li>
  393. </ul></div></div>
  394.  
  395.  
  396. <!------------------------SPOTIFY WIDGET------------------------->
  397. <div class="tablinks" onclick="openCity(event, '5')">
  398. <div class="widget5">
  399. <i class="fa fa-spotify" aria-hidden="true"></i>
  400.  
  401. <div class="widget5name">
  402. spotify <br><span> currently playing </span></div>
  403.  
  404. <div class="widget5username">
  405. <!-- SONG NAME / ARTIST -->
  406. futura free
  407. <br><span>frank ocean</span></div>
  408.  
  409. <div class="widget5desc"></div></div></div>
  410.  
  411.  
  412. <!------------------------IPHONE WIDGET------------------------->
  413. <div class="tablinks" onclick="openCity(event, '4')">
  414. <div class="widget8">
  415.  
  416. <signal class="fa fa-battery-full" aria-hidden="true"></signal>
  417. <wifi class="fa fa-wifi" aria-hidden="true"></wifi> <prov> VERIZON </prov>
  418. <uh class="fa fa-camera" aria-hidden="true"></uh>
  419. <dots class="fa fa-ellipsis-h" aria-hidden="true"></dots>
  420.  
  421. <div class="reminderinfo2">
  422. 10:15 <br> <b>MONDAY 13 AUGUST</b> </div>
  423.  
  424. <div class="remindertop2"></div></div></div>
  425.  
  426. <!------------------------MAIN PIC WIDGET------------------------->
  427. <div class="widget6">
  428. <!-- THIS IS THE MAIN PIC - EDIT THIS ABOVE --></div>
  429.  
  430. <!------------------------TEXT BOX WIDGET------------------------->
  431. <div class="widget7">
  432. <i class="fa fa-users" aria-hidden="true"></i>
  433.  
  434. <div class="widget7name">
  435. <!-- CHARACTER NAME --> name here <br>
  436.  
  437. <!-- LABEL / AGE / WHATEVS --> <span> label or age here </span></div>
  438.  
  439. <div class="widget7desc">
  440. <!-- AES DESC ABOUT CHARACTER --> Lorem ipsum dolor sit amet, eos ut mazim quidam feugiat, ea sit graeci nostro evertitur. Sea ad legimus laoreet. Sed ne alia mollis. Nec temp propriae menandri ea. Te epicurei. </div></div>
  441.  
  442.  
  443. <!----------------------END OF WIDGETS----------------------->
  444.  
  445. <!--------------------THIS IS WHERE THE TAB EDITING IS--------------------->
  446.  
  447. <!--------------------------INSTAGRAM TAB---------------------------->
  448. <div id="1" class="tabcontent">
  449. <span onclick="this.parentElement.style.display='none'" id="topright">x</span>
  450.  
  451. <!----------------------SIDEBAR---------------------->
  452. <div id="igsidebar">
  453.  
  454. <!-- ICON 130x130px --> <img src="https://78.media.tumblr.com/bb5fe1f66946028a5d071b9409018ff1/tumblr_inline_peftbaROs21up3973_540.png">
  455.  
  456. <div class="igprofilename"> <!-- USERNAME --> name</div>
  457.  
  458. <div class="igprofilename2"> <!-- @ NAME --> @username</div>
  459.  
  460. <div class="igfollowbutt">following</div>
  461.  
  462. <div id="igprofiledesc"><!-- DESCRIPTION --> here is ur insta desc!!! 3 lines looks ideal but 2 is okay too. make both descs the same! </div>
  463.  
  464. <div id="igstats">
  465.  
  466. <li><!-- LOCATION --> <b>location:</b> location
  467. <i class="icon-location-pin"></i></li>
  468.  
  469. <li><!-- JOINED DATE --> <b>joined:</b> random date
  470. <i class="icon-calendar"></i></li>
  471.  
  472. <li><!-- BDAY --> <b>birthday:</b> random date
  473. <i class="icon-present"></i></li>
  474.  
  475. <li><!-- FOLLOW COUNT --> <b>###</b> followers
  476. <i class="icon-user"></i></li>
  477.  
  478. </div></div><!-----------SIDEBAR END--------------->
  479.  
  480. <!----------------------POSTS---------------------->
  481. <div id="igfeed">
  482.  
  483. <!-----------------INSTAGRAM POST 1 ------------------>
  484. <div class="igpost">
  485.  
  486. <!-- IMAGE 160x160px --> <img src="https://78.media.tumblr.com/111cb394ae47f2612b9024b9b8ad0b34/tumblr_inline_peft4pLeSo1up3973_540.png">
  487.  
  488. <div class="iguser2">
  489. <!-- USER --> username <i>4h ago</i></div>
  490.  
  491. <div class="igpostdsc"><!-- CAPTION --> here is a caption!!!! make it as wordy as you like, looks best @ 3 lines</div></div>
  492.  
  493. <!-----------------END INSTAGRAM POST------------------>
  494.  
  495.  
  496. <!-----------------INSTAGRAM POST 2 ------------------>
  497. <div class="igpost">
  498.  
  499. <!-- IMAGE 160x160px --> <img src="https://78.media.tumblr.com/732b6b74eecd0a6952af5a182daee88c/tumblr_inline_peft4tishf1up3973_540.png">
  500.  
  501. <div class="iguser2">
  502. <!-- USER --> username <i>4h ago</i></div>
  503.  
  504. <div class="igpostdsc"><!-- CAPTION --> here is a caption!!!! make it as wordy as you like, looks best @ 3 lines</div></div>
  505.  
  506. <!-----------------END INSTAGRAM POST------------------>
  507.  
  508. <!-----------------INSTAGRAM POST 3------------------>
  509. <div class="igpost">
  510.  
  511. <!-- IMAGE 160x160px --> <img src="https://78.media.tumblr.com/7fd566a6b1ab9df46c0b250ca4717c38/tumblr_inline_peft4xfJG81up3973_540.png">
  512.  
  513. <div class="iguser2">
  514. <!-- USER --> username <i>4h ago</i></div>
  515.  
  516. <div class="igpostdsc"><!-- CAPTION --> here is a caption!!!! make it as wordy as you like, looks best @ 3 lines</div></div>
  517.  
  518. <!-----------------END INSTAGRAM POST------------------>
  519.  
  520. <!-----------------INSTAGRAM POST 4 ------------------>
  521. <div class="igpost">
  522.  
  523. <!-- IMAGE 160x160px --> <img src="https://78.media.tumblr.com/4862ef70801a18914a77805bff6ab621/tumblr_inline_peft50qwQo1up3973_540.png">
  524.  
  525. <div class="iguser2">
  526. <!-- USER --> username <i>4h ago</i></div>
  527.  
  528. <div class="igpostdsc"><!-- CAPTION --> here is a caption!!!! make it as wordy as you like, looks best @ 3 lines</div></div>
  529.  
  530. <!-----------------END INSTAGRAM POST------------------>
  531.  
  532. </div></div>
  533.  
  534. <!-----------------END INSTAGRAM TAB------------------>
  535.  
  536.  
  537.  
  538.  
  539.  
  540. <!-----------------TWITTER TAB------------------>
  541. <div id="3" class="tabcontent">
  542. <span onclick="this.parentElement.style.display='none'" id="topright">x</span>
  543.  
  544. <!-----------------SIDEBAR------------------>
  545. <div id="sidebar">
  546.  
  547. <!-- IMAGE 130x130px --> <img src="https://78.media.tumblr.com/bb5fe1f66946028a5d071b9409018ff1/tumblr_inline_peftbaROs21up3973_540.png">
  548.  
  549. <div class="profilename"> <!-- USERNAME --> name</div>
  550.  
  551. <div class="profilename2"> <!-- @ NAME --> @username</div>
  552.  
  553. <div class="followbutt">following</div>
  554.  
  555. <div id="profiledesc"> <!-- DESCRIPTION --> heres ur desc!! looks best @ 3 lines but it can be 2 as well just like insta lol </div>
  556.  
  557. <div id="stats">
  558. <li><!-- LOCATION --> <b>location:</b> location
  559. <i class="icon-location-pin"></i></li>
  560.  
  561. <li><!-- JOINED DATE --> <b>joined:</b> random date
  562. <i class="icon-calendar"></i></li>
  563.  
  564. <li><!-- BDAY --> <b>birthday:</b> random date
  565. <i class="icon-present"></i></li>
  566.  
  567. <li><!-- FOLLOWERS --> <b>###</b> followers
  568. <i class="icon-user"></i></li>
  569.  
  570. </div></div><!-----------SIDEBAR END--------------->
  571.  
  572. <!-----------------FEED------------------>
  573.  
  574. <div id="tweetfeed">
  575.  
  576. <!----------- TWEET #1 ----------->
  577.  
  578. <div class="atweet">
  579.  
  580. <div class="tweeticon">
  581.  
  582. <!-- ICON WILL AUTO RESIZE --> <img src="https://78.media.tumblr.com/bb5fe1f66946028a5d071b9409018ff1/tumblr_inline_peftbaROs21up3973_540.png"></div>
  583.  
  584. <div class="tweetuser"> <!--USERNAME --> <b> name </b>
  585. <br> @username </div>
  586.  
  587. <div class="tweetcontent"> <!-- QUOTED TWEET --> this is a quote tweet!!! if u dont want these just copy n paste the regular tweet coding
  588.  
  589. <div class="atweetresponse" style="border:1px solid #f2f2f2; border-radius:5px; margin-top:10px; padding-bottom:10px; ">
  590.  
  591. <div class="tweeticon">
  592.  
  593. <!-- ICON WILL AUTO RESIZE --> <img src="https://78.media.tumblr.com/bb5fe1f66946028a5d071b9409018ff1/tumblr_inline_peftbaROs21up3973_540.png"></div>
  594.  
  595. <div class="tweetuser"> <!-- USERNAME OF ORIGINAL TWEET --> <b> name </b>
  596. <br> @username </div>
  597.  
  598. <div class="tweetcontent"> <!-- ORIGINAL TWEET --> this is a tweet !!!!! make it as long as u like ig 240 characters? </div>
  599.  
  600. </div></div>
  601.  
  602. <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>
  603. <!---------- TWEET #1 END---------->
  604.  
  605. <!----------- TWEET #2 ----------->
  606. <div class="atweet">
  607.  
  608. <div class="tweeticon">
  609.  
  610. <!-- ICON WILL AUTO RESIZE --> <img src="https://78.media.tumblr.com/bb5fe1f66946028a5d071b9409018ff1/tumblr_inline_peftbaROs21up3973_540.png"></div>
  611.  
  612. <div class="tweetuser"> <!-- USERNAME --> <b> name </b>
  613. <br>@username</div>
  614.  
  615. <div class="tweetcontent"> <!-- TWEET --> Harry Potter was an actual wizard so why was he still specky. Just cast a spell to fix your eyes mate. Retinus Repairius </div>
  616.  
  617. <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>
  618. <!---------- TWEET #2 END ---------->
  619.  
  620. <!----------- TWEET #3 ----------->
  621. <div class="atweet">
  622.  
  623. <div class="tweeticon">
  624.  
  625. <!-- ICON WILL AUTO RESIZE --> <img src="https://78.media.tumblr.com/bb5fe1f66946028a5d071b9409018ff1/tumblr_inline_peftbaROs21up3973_540.png"></div>
  626.  
  627. <div class="tweetuser"> <!-- USERNAME --> <b> name </b>
  628. <br>@username</div>
  629.  
  630. <div class="tweetcontent"> <!-- TWEET --> I don’t want a sugar daddy but maybe like a sugar buddy. I just hit him up like “Hey how are you today?” and he replies “Doing great thanks for asking here’s $7,000.” </div>
  631.  
  632. <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>
  633. <!---------- TWEET #3 END ---------->
  634.  
  635. <!----------- TWEET #4 ----------->
  636. <div class="atweet">
  637.  
  638. <div class="tweeticon">
  639.  
  640. <!-- ICON WILL AUTO RESIZE --> <img src="https://78.media.tumblr.com/bb5fe1f66946028a5d071b9409018ff1/tumblr_inline_peftbaROs21up3973_540.png"></div>
  641.  
  642. <div class="tweetuser"> <!-- USERNAME --> <b> name </b>
  643. <br>@username</div>
  644.  
  645. <div class="tweetcontent"> <!-- TWEET --> Ima flake on you like 40 times before we actually chill, only the strong survive </div>
  646.  
  647. <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>
  648. <!---------- TWEET #4 END ---------->
  649. <!----------END TWITTER FEED --------------->
  650. </div></div>
  651.  
  652. <!-----------------END TWITTER TAB------------------>
  653.  
  654.  
  655.  
  656.  
  657. <!-----------------IPHONE TAB ------------------>
  658. <div id="4" class="tabcontent">
  659. <span onclick="this.parentElement.style.display='none'" id="topright">x</span></span></span>
  660. <div class="widget4left">
  661.  
  662. <!---------------NOTIFICATIONS----------------->
  663. <div class="notifs1">
  664.  
  665. <i class="fa fa-comments" aria-hidden="true"></i>
  666.  
  667. <div class="notifs1name">
  668. <!-- NOTIF 1, IF U CHANGE THIS CHANGE THE ICON - THEY'RE FONT AWESOME ICONS --> imessage <br><span>six new messages</span></div></div>
  669.  
  670. <div class="notifs2">
  671.  
  672. <i class="fa fa-twitter" aria-hidden="true"></i>
  673.  
  674. <div class="notifs2name">
  675. <!-- NOTIF 2, IF U CHANGE THIS CHANGE THE ICON - THEY'RE FONT AWESOME ICONS --> twitter <br><span>eighteen notifications</span></div></div>
  676.  
  677. <div class="notifs3">
  678.  
  679. <i class="fa fa-instagram" aria-hidden="true"></i>
  680.  
  681. <div class="notifs3name">
  682. <!-- NOTIF 3, IF U CHANGE THIS CHANGE THE ICON - THEY'RE FONT AWESOME ICONS --> instagram <br><span>100+ new notifications</span></div></div>
  683.  
  684. <!---------------NOTIFICATIONS END----------------->
  685.  
  686. <!---------------SNAPCHAT----------------->
  687.  
  688. <!-- THIS IS THE FIRST SNAP - IMAGE SIZE 220x300px--> <div id="snap" style="background-image:url('https://78.media.tumblr.com/fb64dbc0a43d3fbd36d6b2d892a151c0/tumblr_inline_pefsjidEaT1up3973_540.png');">
  689.  
  690. <div class="username"> <!-- USERNAME --> username </div>
  691.  
  692. <div class="timeago"> <!-- TIME AGO --> 2hr ago</div>
  693.  
  694. <div class="caption"> <!-- CAPTION -->
  695. snap number 1 !! </div>
  696.  
  697. <div id="s1">
  698. <div class="timeago"> <!-- TIME AGO --> 4hr ago</div>
  699.  
  700. <div class="caption"> <!-- CAPTION -->
  701.  
  702. wow snap 2 (: </div>
  703.  
  704. <!-- THIS IS THE SECOND SNAP - IMAGE SIZE 220x300px -->
  705. <img src="https://78.media.tumblr.com/13b49b2e4f64fb119f876cfae742dcca/tumblr_inline_pefsjmkhh41up3973_540.png"></div>
  706.  
  707. <div id="s2">
  708. <div class="timeago"> <!-- TIME AGO --> 7hr ago</div>
  709.  
  710. <div class="caption"> <!-- CAPTION -->
  711. another one.... </div>
  712.  
  713. <!-- THIS IS THE THIRD SNAP - IMAGE SIZE 220x300px -->
  714. <img src="https://78.media.tumblr.com/facd2c35528c82224c7c0f2edee7e79a/tumblr_inline_pefsjsbqvu1up3973_540.png"></div>
  715.  
  716. <div id="s3">
  717. <div class="timeago"> <!-- TIME AGO --> 12hr ago</div>
  718.  
  719. <div class="caption"> <!-- CAPTION -->
  720. another ?!! </div>
  721.  
  722. <!-- THIS IS THE FORTH SNAP - IMAGE SIZE 220x300px -->
  723. <img src="https://78.media.tumblr.com/d71c7d444642bdc718daec998e63f670/tumblr_inline_pefsjwO1m21up3973_540.png"></div>
  724. </div></div>
  725. <!---------------SNAPCHAT END----------------->
  726.  
  727. <!---------------IMESSAGES----------------->
  728.  
  729. <div class="widget4right">
  730.  
  731. <div class="text2"><!-- TEXTING TO --> To: NAME </div>
  732.  
  733. <div class="textcontain"><div class="texttime"> <!-- DATE AND TIME -->
  734. date at 0:00am </div>
  735.  
  736. <div class="lefttxt"> <!-- FIRST TEXT -->
  737. here is the first text !!! make it as long / short as u want </div>
  738.  
  739. <div class="righttxt"> <!-- SECOND TEXT -->
  740. heres another one. you can add as many texts as you want because its a scrolling thing but i would recommend only adding like five tbh</div>
  741.  
  742. <div class="lefttxt"> <!-- THIRD TEXT -->
  743. another one. if u wanna make this a group chat u can too! </div>
  744.  
  745. <div class="righttxt"> <!-- FORTH TEXT -->
  746. text no 4. i dont know what purpose this serves but like. go off</div>
  747.  
  748. <div class="lefttxt"> <!-- FIFTH TEXT -->
  749. u can even add pics if u really wanted to lol </div>
  750.  
  751. <div class="txtbttm">
  752. <i class="fa fa-camera" aria-hidden="true"></i>
  753. <i class="fa fa-heart" aria-hidden="true"></i>
  754.  
  755. <span> Type a message </span></div>
  756. </div></div>
  757.  
  758. <!---------------IMESSAGES END----------------->
  759. <!---------------END IPHONE TAB----------------->
  760.  
  761.  
  762.  
  763.  
  764.  
  765. </div> <!----------THIS IS WHERE THE ENTIRE CONTAINER ENDS------------>
  766.  
  767. <!----------CREDIT - DO NOT DELETE OR MOVE THIS------------>
  768. <a href="http://vcnilla.tumblr.com/">
  769. <div id="credit">VCNILLA
  770. </div></a>
  771.  
  772. <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; }
  773. tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click(); </script>
  774. <script> $( "#navi" ).click(function() { $( ".exnavi" ).animate({width:'toggle'}); }); </script></script></body>
  775. </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!