Advertisement
Guest User

Untitled

a guest
Nov 15th, 2019
117
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.00 KB | None | 0 0
  1. background:#ffbed6}*{margin:0;padding:0;box-sizing:border-box}:before,:after{content:'';position:absolute}:root{--font-1:Cookie,cursive;--font-2:'Great Vibes',cursive;--font-3:'Fira Code',monospace;--font-4:'Lobster Two',cursive}a{display:inline-block;text-decoration:none}span{display:inline-block}h1,h2,h3{font-weight:300}#jd-main{width:100%;height:100vh;position:relative;font-family:var(--font-3);color:#222;font-size:1em;overflow:hidden}.jd-app{width:750px;height:500px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.jd-header{width:300px;height:60px;position:relative}.jd-header h1{font-size:2em;font-weight:700;color:#222}.jd-header span{color:#ff4e90}.jd-header:after{content:attr(name);text-transform:uppercase;width:120px;line-height:26px;background:#ff8bb6;text-align:center;font-size:.9em;border-radius:3px;top:-30px;right:0;opacity:0;transition:all .2s ease-out}.jd-header:before{width:0;height:0;border-top:solid 10px #ff8bb6;border-left:solid 5px transparent;border-right:solid 5px transparent;right:95px;top:-5px;opacity:0;transition:all .2s ease-out}.jd-header:hover:before,.jd-header:hover:after{opacity:1}.jd-container{width:100%;height:420px;margin-top:20px;position:relative}.jd-page-home,.jd-nav,.jd-pages{width:350px;height:420px;border-radius:0 30px 30px 30px;position:absolute;top:0}.jd-page-home{background:#ff8bb6;box-shadow:10px 0 10px rgba(0,0,0,.1);transform:translate(50px,0);z-index:100}.jd-page-home:after{width:0;height:0;border-top:solid 50px #ff8bb6;border-left:solid 50px transparent;left:-50px;top:0}.jd-title{font-family:var(--font-1);font-size:9em;padding:0 50px;color:#c40062;margin-top:80px}.jd-page-home p{padding:15px 50px}.jd-btn-xat{color:#222;padding:5px;background:rgba(255,255,255,.3);border-radius:3px;margin-left:80px;transition:all .2s ease-out}.jd-btn-xat:hover{background:#222;color:#ff8bb6}.jd-nav{transform:translate(110px,0);z-index:50}.jd-btn-nav{width:100px;height:420px;position:absolute;border-radius:0 30px 30px 0;box-shadow:10px 0 10px rgba(0,0,0,.1);transition:all .2s ease-out}.jd-btn-nav:nth-child(1){right:30px;background:#ff6da3;z-index:20}.jd-btn-nav:nth-child(2){right:0;background:#ff4e90}.jd-btn-nav span{line-height:32px;width:420px;transform:rotate(-90deg);position:absolute;left:-126px;top:195px;padding-left:70px;color:#222;transition:all .3s ease-out}.jd-btn-nav span:after{width:6px;height:6px;background:#c40062;border-radius:50%;left:30px;top:13px;box-shadow:10px 0 #c40062,20px 0 #c40062}.jd-btn-nav span:hover{padding-left:120px;color:#fff}.jd-btn-nav:hover{transform:translate(10px,0)}.jd-btn-nav:after{width:100%;height:100%;background:#fff;border-radius:0 30px 30px 0;opacity:0}.jd-btn-nav:hover:after{animation:pulse .5s ease-out}@keyframes pulse{0%{opacity:.8}100%{opacity:0}}.jd-pages{right:0}[class*='jd-inner-page']{width:100%;height:100%;position:absolute;background:#ffe4ee;box-shadow:10px 0 10px rgba(0,0,0,.1);border-radius:0 30px 30px 0;overflow:hidden;transform:translate(-110%,0);opacity:0;visibility:hidden;transition:all .5s cubic-bezier(0,.62,.55,.97)}.jd-inner-page-banner{transform:translate(0,0);opacity:1;visibility:visible}#jd-content-1:target .jd-inner-page-video{transform:translate(0,0);opacity:1;visibility:visible}#jd-content-2:target .jd-inner-page-friend{transform:translate(0,0);opacity:1;visibility:visible}.jd-block{width:260px;height:380px;margin:20px 75px}.jd-block h3{color:#ff8bb6;font-family:var(--font-1);font-size:1.6em;border-bottom:dashed 1px #ff8bb6}.jd-inner-block{width:100%;height:325px;margin-top:20px;overflow-y:auto}.jd-box-video{width:250px;height:141px;background:#222;box-shadow:0 5px #ffbed6;margin-bottom:30px;position:relative}.jd-box-video:after{width:60%;height:0;border-bottom:dashed 1px #ffbed6;bottom:-15px;left:20%}::-webkit-scrollbar{width:5px;background:#ffbed6}::-webkit-scrollbar-thumb{background:#222}.jd-row{width:195px;height:70px;margin-bottom:10px;display:flex}.jd-box-avatar{width:70px;height:70px;background:#fff;padding:10px;border-radius:10px 0 10px 10px}.jd-img-avatar{width:50px;height:50px;border-radius:5px}.jd-row span{width:110px;line-height:26px;height:26px;background:#ffbed6;border-radius:0 10px 0 10px;margin-left:5px;padding-left:10px;color:#222;font-size:.8em;transition:all .3s ease-out}.jd-row:hover span{padding-left:30px;color:#fff}.jd-footer{position:absolute;width:100%;line-height:50px;text-align:center;bottom:0;font-size:.8em;}
  2. div#nowayfixed {
  3. z-index: 2147483647;
  4. position: fixed;
  5. bottom: 0;
  6. left: 0;
  7. }
  8. div#nowaymenu
  9. {
  10. background-color:#009;
  11. background: linear-gradient(#000014, #000024, #00004e);
  12. border-radius: 0px 5px 0px 0px;
  13. display: none;
  14. FONT-SIZE: 12pt;
  15. FONT-FAMILY: Arial, Helvetica, sans-serif;
  16. }
  17. div#nowayitems
  18. {
  19. padding-top: 5px;
  20. padding-right: 0px;
  21. /*padding-bottom: 5px;*/
  22. padding-left: 0px;
  23. margin-left: 6px;
  24. line-height: 130%;
  25. color:#fff;
  26. }
  27. div#nowayitems > a
  28. {
  29. color:#fff;
  30. text-decoration: none;
  31. }
  32. div#nowayitems > a:hover {
  33. text-decoration: underline;
  34. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement