API tools faq
paste
Advertisement
vcnillacodes

DASHBOARD / FRVDDIEMERCURY & STEVENHYD

vcnillacodes
Dec 27th, 2018
981
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.73 KB | None | 0 0
raw download clone embed print report
  1. <!-- DASHBOARD BY FRVDDIEMERCURY / STEVENHYD -->
  2.  
  3. <html><head>
  4.  
  5. <title> title goes here !</title>
  6.  
  7. <link rel="shortcut icon" href="{Favicon}">
  8.  
  9. <!---------- SCRIPTS AND FONTS ---------->
  10.  
  11. <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"; }
  12.  
  13. tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", "");}
  14.  
  15. document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script>
  16.  
  17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  18.  
  19. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  20.  
  21. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  22.  
  23. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  24.  
  25. <link href="https://fonts.googleapis.com/css?family=open sans:200,300,400" rel="stylesheet">
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
  28.  
  29. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  30.  
  31. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  32.  
  33. <link href="https://file.myfontastic.com/6d6B5KbthViXjro9oEeYrA/icons.css" rel="stylesheet">
  34.  
  35. </head>
  36.  
  37. <style type="text/css">
  38.  
  39. /*---------------SCROLLBAR--------*/
  40.  
  41. ::-webkit-scrollbar {width: 0px; height: 4px;}
  42.  
  43. ::-webkit-scrollbar-thumb { background-color: #d9d9d9;}
  44.  
  45. /*-----------------TOOLTIPS----------------*/
  46.  
  47. #s-m-t-tooltip { max-width:300px; border-radius: 0px; padding:6px; padding-left:9px; padding-right:9px; margin:25px 20px 5px 0px; color:#949494; font-family: Montserrat; background: #fff; border-radius:3px; z-index:99999; font-size:7px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; }
  48.  
  49. /*-----------------BASIC BODY STUFF-------------*/
  50.  
  51. body { color:#a8a8a8; background-color:#e9e9e9; text-align:justify; font-family:'open sans'; font-size:11px; font-weight:600; background: #fce8e9;
  52.  
  53. /*----- DELETE THIS IF U WANT A BLOCK COLOR BACKGROUND-----*/ background: -moz-linear-gradient(left, #fce8e9 0%, #fbf7f5 100%); background: -webkit-linear-gradient(left, #fce8e9 0%,#fbf7f5 100%); background: linear-gradient(to right, #fce8e9 0%,#fbf7f5 100%); }
  54.  
  55. .vcnilla { width:665px; height:580px; position: absolute; top:0; bottom:0px; left:0; right:0; margin:auto; background:#fff; text-align:center; overflow:auto; overflow-x:hidden; border-radius:7px; overflow:hidden; }
  56.  
  57. /*-------------LINKS & FONT STUFF--------------*/
  58.  
  59. a:link, a:active, a:visited { color: #aaa; text-decoration:none; }
  60.  
  61. a:hover { color:#aaa; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;}
  62.  
  63. /*----------------TOPBAR------------------*/
  64.  
  65. #topbar { background:#fff; position:absolute; top:0px; width:665px; height:44px; border-bottom:1px solid #f2f2f2;}
  66.  
  67. .search { background:#595959; color:#fff; padding:14px; width:95px; font-weight:600; }
  68.  
  69. .location { position:absolute; padding:14px; width:130px; text-align:left; font-weight:600; top:1px; left:98px; }
  70.  
  71. .location i { vertical-align:middle; margin-right:3px; }
  72.  
  73. .logo { position:absolute; margin:auto; left:0px; right:0px; padding:14px; top:-9px; font-size:32px; color:#f4dedf; opacity:0.99; }
  74.  
  75. .usrinfo { padding:14px; position:absolute; top:0px; right:0px; font-weight:600; }
  76.  
  77. .usrinfo i { vertical-align:middle; font-size:15px; margin-right:3px; margin-left:8px; }
  78.  
  79. /*---------------- PROFILE CODING------------------*/
  80.  
  81. #smtop { position:absolute; background:#fff; width:700px; top:0px; height:134px; margin-top:44px; left:0px; border-bottom:1px solid #f2f2f2; }
  82.  
  83. .smicon { position:absolute; left:0px; top:0px; border-right:1px solid #f2f2f2; padding:14px; padding-bottom:19px; }
  84.  
  85. .smicon img { width:100px; height:100px; border-radius:8px; }
  86.  
  87. .smstats { width:auto; position:absolute; left:128px; }
  88.  
  89. .smstats li { list-style-type:none; font-size:8px; letter-spacing:1px; border-bottom:1px solid #f2f2f2; padding:8.5px; padding-top:10px; text-align:center; text-transform:uppercase; border-right:1px solid #f2f2f2; width:200px; }
  90.  
  91. .smstats li:last-child { border-bottom:none; }
  92.  
  93. .smstats i { color:#f4dcdd; font-size:14px; vertical-align:middle; margin-right:5px; }
  94.  
  95. .smstats b { color:#f4dcdd; }
  96.  
  97. /*----------------MAIN GRID CODING------------------*/
  98.  
  99. .grid { width:665px; height:402px; position:absolute; bottom:0px; left:0px; overflow:auto; padding-bottom:25px; overflow-x:hidden; background:#fff; }
  100.  
  101. /*----------------PHOTO POST CODING------------------*/
  102.  
  103. .post { margin-left:30px; margin-left:25px; margin-top:25px; height:auto; width:295px; text-align:justify; border-radius:6px; border:1px solid #f4f4f4; float:left; overflow:hidden; float:left; background:#fff; }
  104.  
  105. .arrw { float:right; width:30px; padding:9px; margin-top:-9px; padding-bottom:10px; margin-right:-9px; font-size:10px; background: -moz-linear-gradient(-45deg, #f4dcdd 0%, #fff3ed 100%); background: -webkit-linear-gradient(-45deg, #f4dcdd 0%,#fff3ed 100%); background: linear-gradient(135deg, #f4dcdd 0%,#fff3ed 100%); }
  106.  
  107. .pstinfo { width:305px; height:50px; position:absolute; margin-top:-28px; margin-left:14px; }
  108.  
  109. .pstname { font-weight:700px; width:245px; float:right; font-size:13px; color:#656565; margin-top:5px; }
  110.  
  111. .pstcon { width:295px; height:250px; background:#fff; }
  112.  
  113. .pstinfo img { border:2px solid #fff; border-radius:100%; width:50px; height:50px; }
  114.  
  115. .pststats { font-weight:600; float:right; margin-top:-10px; width:245px; font-size:9px; }
  116.  
  117. .pststats i { vertical-align:middle; margin-right:2px; }
  118.  
  119. /*----------------TEXT POST CODING------------------*/
  120.  
  121. .pstcont { margin:20px; margin-top:35px; text-align:justify; font-size:9px; }
  122.  
  123. .stats { font-weight:700; padding:10px; background:#f4f4f4; font-size:9px; }
  124.  
  125. .stats i { vertical-align:middle; margin-right:4px; }
  126.  
  127. .stats i:nth-child(2) { margin-left:7px; }
  128.  
  129. .pstcontext { width:295px; height:40px; background:#fff; }
  130.  
  131. .pstnametext { font-weight:700px; width:245px; float:right; font-size:13px; color:#656565; margin-top:6px; }
  132.  
  133. .pststatstext { font-weight:600; float:right; margin-top:-14px; width:245px; font-size:9px; }
  134.  
  135. .pststatstext i { vertical-align:middle; margin-right:2px; }
  136.  
  137. .pstinfotext { width:305px; height:50px; position:absolute; margin-top:-26px; margin-left:14px; }
  138.  
  139. .pstinfotext img { border:2px solid #fff; border-radius:100%; width:45px; height:45px; }
  140.  
  141. /*----------------AUDIO POST CODING------------------*/
  142.  
  143. .pstconaudio { width:295px; height:250px; background:#fff; }
  144.  
  145. .mplayer { width:170px; height:65px; transform:rotate(180deg); }
  146.  
  147. .mplayer li { list-style-type:none; float:left; margin-left:4px; height:30px; width:4px; background:#f4dcdd; }
  148.  
  149. .mplayer li:first-child { animation:bar1 1s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; }
  150.  
  151. .mplayer li:nth-child(2) { animation:bar1 1.03s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;}
  152.  
  153. .mplayer li:nth-child(3) { animation:bar1 1.05s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;}
  154.  
  155. .mplayer li:nth-child(4) { animation:bar1 1.07s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; }
  156.  
  157. .mplayer li:nth-child(5) { animation:bar1 1.08s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; }
  158.  
  159. @-webkit-keyframes bar1 { 0% { height:30px;} 50% {height:1px;} 100% { height:30px;} }
  160. @keyframes bar1 { 0% { height:30px;} 50% {height:1px;} 100% { height:30px;} }
  161.  
  162. .minfo { width:305px; height:40px; line-height:0px; font-size:17px; font-weight:300;margin-top:30px; margin-left:0px; text-align:center; }
  163.  
  164. .minfo b { font-size:8px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
  165.  
  166. .audiopstinfo { width:305px; height:50px; position:absolute; margin-top:-60px; margin-left:14px; }
  167.  
  168. .audiopstname { font-weight:700px; width:245px; float:right; font-size:13px; color:#929292; margin-top:9px; }
  169.  
  170. .audiopstinfo img { width:50px; height:50px; border:2px solid #fff; border-radius:100%; }
  171.  
  172. .audiopststats { font-weight:600; float:right; margin-top:-15px; width:245px; font-size:9px; }
  173.  
  174. .audiopststats i { vertical-align:middle; margin-right:2px; }
  175.  
  176. .mcontrols { font-size:30px; color:#f4dcdd; width:298px; text-align:center; margin-top:3px; opacity:1; }
  177.  
  178. .mcontrols i { margin:5px; cursor:pointer; }
  179.  
  180. /*----------------FILTERS CODING------------------*/
  181.  
  182. #filters { position:absolute; width:305px; top:85px; right:15px; }
  183.  
  184. #filters a { margin:8px; display: inline-block; text-transform:uppercase; font-size:8px; font-weight:bold; letter-spacing:1px; line-height:20px; }
  185.  
  186. #filters i { font-size:24px; color:#f4dcdd; }
  187.  
  188. /*-----------------CREDIT----------------*/
  189.  
  190. #credit { position:fixed; bottom:13px; left:13px; background:#fff; padding:5px; font-size:10px; color:#f4dcdd; font-weight:bold; text-transform:lowercase; border-radius:6px; }
  191.  
  192. </style>
  193.  
  194. <body><div class="vcnilla">
  195.  
  196. <!-----------TOPBAR----------->
  197.  
  198. <div id="topbar">
  199.  
  200. <div class="search">Search</div>
  201.  
  202. <div class="location"><i class="icon-004-globe"></i> Location </div>
  203.  
  204. <div class="usrinfo"> First Last <i class="icon-002-user"></i> <i class="icon-001-power"></i></div></div>
  205.  
  206. <!-------------------POSTS BEGIN----------------------->
  207.  
  208. <div id="tab1" class="tabcontent" style="display:block;">
  209.  
  210. <!----------SOCIAL MEDIA TOPBAR------------->
  211.  
  212. <div id="smtop">
  213.  
  214. <!---- ICON AND STATISTICS ON THE TOP ----->
  215.  
  216. <div class="smicon">
  217.  
  218. <!----- TOP ICON, 100x100px ----->
  219.  
  220. <img src="https://via.placeholder.com/100x100"></div>
  221.  
  222. <div class="smstats">
  223.  
  224. <li><i class="icon-002-user"></i> <b>USERNAME</b> username</li>
  225.  
  226. <li><i class="icon-003-placeholder"></i> <b>LOCATION</b> location </li>
  227.  
  228. <li><i class="icon-004-users"></i> <b>FOLLOWERS</b> ### </li>
  229.  
  230. <li><i class="icon-005-calendar"></i> <B>JOINED</B> 01 January 2001 </li>
  231.  
  232. </div></div>
  233.  
  234. <div id="filters">
  235. <a href="#" rel="image" class="filters"><i class="icon-002-picture"></i><br>images</a>
  236.  
  237. <a href="#" rel="text" class="filters"><i class="icon-003-new-file"></i><br>text</a>
  238.  
  239. <a href="#" rel="music" class="filters"><i class="icon-compact-disc"></i><br>audio</a>
  240.  
  241. <a href="#" rel="media" class="filters"><i class="icon-007-location"></i><br>all</a></div>
  242.  
  243. <!---ENTER YOUR POSTS HERE - COPY & PASTE AS MANY AS YOU LIKE--->
  244.  
  245. <div class="grid">
  246.  
  247. <!-----------------AN AUDIO POST---------------->
  248.  
  249. <div class="post media music">
  250.  
  251. <div class="pstconaudio">
  252.  
  253. <div class="mplayer"> <li></li> <li></li> <li></li> <li></li> <li></li></div>
  254.  
  255. <div class="minfo">
  256.  
  257. Artist
  258. <p><b>Song Name</b></p>
  259.  
  260. </div>
  261.  
  262. <div class="mcontrols">
  263.  
  264. <i class="icon-002-arrows"></i>
  265.  
  266. <i class="icon-002-play-button"></i>
  267.  
  268. <i class="icon-003-play"></i> </div></div>
  269.  
  270. <div class="audiopstinfo">
  271.  
  272. <!----- ICON, 50x50px -----> <img src="https://via.placeholder.com/50x50">
  273.  
  274. <div class="audiopstname">First Last</div>
  275.  
  276. <div class="audiopststats">
  277.  
  278. <i class="icon-004-time"></i> Time Ago &nbsp;
  279.  
  280. <i class="icon-003-placeholder"></i> Location </div></div></div>
  281.  
  282. <!---------------AUDIO POST END-------------->
  283.  
  284. <!-----------------AN AUDIO POST---------------->
  285.  
  286. <div class="post media music">
  287.  
  288. <div class="pstconaudio">
  289.  
  290. <div class="mplayer"> <li></li> <li></li> <li></li> <li></li> <li></li></div>
  291.  
  292. <div class="minfo">
  293.  
  294. Artist
  295. <p><b>Song Name</b></p>
  296.  
  297. </div>
  298.  
  299. <div class="mcontrols">
  300.  
  301. <i class="icon-002-arrows"></i>
  302.  
  303. <i class="icon-002-play-button"></i>
  304.  
  305. <i class="icon-003-play"></i> </div></div>
  306.  
  307. <div class="audiopstinfo">
  308.  
  309. <!----- ICON, 50x50px -----> <img src="https://via.placeholder.com/50x50">
  310.  
  311. <div class="audiopstname">First Last</div>
  312.  
  313. <div class="audiopststats">
  314.  
  315. <i class="icon-004-time"></i> Time Ago &nbsp;
  316.  
  317. <i class="icon-003-placeholder"></i> Location </div></div></div>
  318.  
  319. <!---------------AUDIO POST END-------------->
  320.  
  321. <!-----------------A TWITTER POST---------------->
  322.  
  323. <div class="post media text">
  324.  
  325. <div class="pstcontext"></div>
  326.  
  327. <div class="pstinfotext">
  328.  
  329. <!----- ICON, 50x50px -----> <img src="https://via.placeholder.com/50x50">
  330.  
  331. <div class="pstnametext">First Last</div>
  332.  
  333. <div class="pststatstext">
  334.  
  335. <i class="icon-004-time"></i> Time Ago &nbsp;
  336.  
  337. <i class="icon-003-placeholder"></i> Location </div></div>
  338.  
  339. <div class="pstcont"> heres ur tweet ! looks best at 2 lines but u can have it as long as u want tbh </div></div>
  340.  
  341. <!---------------TWITTER POST END-------------->
  342.  
  343. <!-----------------A TWITTER POST---------------->
  344.  
  345. <div class="post media text">
  346.  
  347. <div class="pstcontext"></div>
  348.  
  349. <div class="pstinfotext">
  350.  
  351. <!----- ICON, 50x50px -----> <img src="https://via.placeholder.com/50x50">
  352.  
  353. <div class="pstnametext">First Last</div>
  354.  
  355. <div class="pststatstext">
  356.  
  357. <i class="icon-004-time"></i> Time Ago &nbsp;
  358.  
  359. <i class="icon-003-placeholder"></i> Location </div></div>
  360.  
  361. <div class="pstcont"> heres ur tweet ! looks best at 2 lines but u can have it as long as u want tbh </div></div>
  362.  
  363. <!---------------TWITTER POST END-------------->
  364.  
  365. <!-----------------A INSTA POST---------------->
  366.  
  367. <div class="post media image">
  368.  
  369. <div class="pstcon"> <!----- MAIN IMAGE, 295x250px -----> <img src="https://via.placeholder.com/295x250"> </div>
  370.  
  371. <div class="pstinfo">
  372.  
  373. <!----- ICON, 50x50px -----> <img src="https://via.placeholder.com/50x50">
  374.  
  375. <div class="pstname" style="color:#fff;">First Last</div>
  376.  
  377. <div class="pststats">
  378.  
  379. <i class="icon-004-time"></i> Time Ago &nbsp;
  380.  
  381. <i class="icon-003-placeholder"></i> Hollywood, LA</div></div>
  382.  
  383. <div class="pstcont"> heres ur post caption ! looks best at one line imo </div></div>
  384.  
  385. <!---------------INSTA POST END-------------->
  386.  
  387. <!-----------------A INSTA POST---------------->
  388.  
  389. <div class="post media image">
  390.  
  391. <div class="pstcon"> <!----- MAIN IMAGE, 295x250px -----> <img src="https://via.placeholder.com/295x250"> </div>
  392.  
  393. <div class="pstinfo">
  394.  
  395. <!----- ICON, 50x50px -----> <img src="https://via.placeholder.com/50x50">
  396.  
  397. <div class="pstname" style="color:#fff;">First Last</div>
  398.  
  399. <div class="pststats">
  400.  
  401. <i class="icon-004-time"></i> Time Ago &nbsp;
  402.  
  403. <i class="icon-003-placeholder"></i> Hollywood, LA</div></div>
  404.  
  405. <div class="pstcont"> heres ur post caption ! looks best at one line imo </div></div>
  406.  
  407. <!---------------INSTA POST END-------------->
  408.  
  409. </div></div></div></div><!----------END OF ENTIRE CONTAINER------------->
  410.  
  411. <!-- CREDIT - DO NOT DELETE -->
  412.  
  413. <a href="http://vcnilla.tumblr.com/"> <div id="credit" title="frvddiemercury & stevenhyd"> VCNILLA </div></a>
  414.  
  415. <script> $(document).ready(function(){ $(".filters").click(function(e) { e.preventDefault(); $(".media").not("." + $(this).attr("rel")).hide(500); $("." + $(this).attr("rel")).show(500); }); }); </script>
  416.  
  417. <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>
  418.  
  419. </body></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!