Advertisement
Guest User

CSS - CEIFADORA

a guest
Dec 15th, 2019
73
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.32 KB | None | 0 0
  1. background:url(https://i.postimg.cc/C1vW3Kpt/7a3tumblrls0w5txuft1r3v.png)top left repeat,radial-gradient(#660000,#020202)}*{margin:0;padding:0;box-sizing:border-box}:root{--font-1:Merriweather,serif;--font-2:'Roboto Slab',serif;--font-3:Arvo,serif}:before,:after{content:'';position:absolute}a{display:inline-block;text-transform:uppercase;text-decoration:none}span{display:inline-block}h1,h2{font-weight:300}#main{width:100%;height:100vh;position:relative;color:#020202;font-family:var(--font-1);font-size:16px;overflow:hidden}.app{width:950px;height:100vh;position:relative;margin:0 auto}.header{height:150px;display:inline-block;width:100%;margin-top:80px;text-align:right}.header h1{font-size:8em;line-height:110px;color:#660000;font-family:var(--font-2);text-shadow:2px 2px #222}.header p{font-size:1.6em;color:#eee;text-shadow:1px 1px #222}._color{color:#eee}.nav{height:230px;margin-top:30px}.nav ul{position:relative;display:flex;position:relative;justify-content:space-between}[class*='item-nav']{width:230px;height:230px;list-style:none}.btn-nav{width:100%;height:100%;padding:10px;background:#660000;position:relative;overflow:hidden}.btn-nav img{width:210px;height:210px;filter:grayscale(1)}.btn-nav span{width:210px;line-height:40px;text-align:center;background:rgba(255,192,203,.6);position:absolute;left:10px;bottom:-40px;color:#222;transition:all .3s ease-out}.btn-nav:hover span{bottom:10px}.item-nav:nth-of-type(5){position:absolute;left:-230px;top:230px;text-align:center;opacity:0;transition:all .5s ease-in-out}.hover-li{width:120px;height:120px;display:inline-block;margin-top:50px;background:#660000;padding:5px;border-radius:50%;position:relative}.img-nav-hover{width:110px;height:110px;border-radius:50%;position:absolute;top:5px;left:5px;opacity:0;transform:rotate(0);transition:all .4s ease-out}.item-nav:nth-of-type(1):hover ~ .item-nav:nth-of-type(5){left:0;opacity:1}.item-nav:nth-of-type(2):hover ~ .item-nav:nth-of-type(5){left:240px;opacity:1}.item-nav:nth-of-type(3):hover ~ .item-nav:nth-of-type(5){left:480px;opacity:1}.item-nav:nth-of-type(4):hover ~ .item-nav:nth-of-type(5){left:720px;opacity:1}.item-nav:nth-of-type(1):hover ~ .item-nav:nth-of-type(5) .img-nav-hover:nth-of-type(1){transform:rotate(360deg);opacity:1}.item-nav:nth-of-type(2):hover ~ .item-nav:nth-of-type(5) .img-nav-hover:nth-of-type(2){transform:rotate(360deg);opacity:1}.item-nav:nth-of-type(3):hover ~ .item-nav:nth-of-type(5) .img-nav-hover:nth-of-type(3){transform:rotate(360deg);opacity:1}.item-nav:nth-of-type(4):hover ~ .item-nav:nth-of-type(5) .img-nav-hover:nth-of-type(4){transform:rotate(360deg);opacity:1}.page{width:100%;height:450px;position:absolute;background:#660000;box-shadow:0 0 100px 10px rgba(0,0,0,.4);top:200vh;left:50%;transform:translate(-50%,-50%);transition:all .5s ease-out;overflow:hidden}[class*='page-']{width:100%;height:450px;position:absolute;top:0;left:0;background:#660000;display:flex;visibility:hidden}[class*='col-']{width:50%}.col-left{box-shadow:-5px 0 #660000 inset}.col-right{overflow-y:auto;height:440px}.title-page{width:100%;height:120px;margin-top:150px;padding-left:50px;color:#222}.title-page h1{font-size:5em;line-height:80px}.title-page span{color:#660000}#content-1:target .page{top:50%}#content-1:target .page-home{visibility:visible}#content-2:target .page{top:50%}#content-2:target .page-music{visibility:visible}#content-3:target .page{top:50%}#content-3:target .page-friend{visibility:visible}#content-4:target .page{top:50%}#content-4:target .page-gallery{visibility:visible}.user{width:190px;height:190px;border-radius:50%;box-shadow:0 0 0 5px #660000;margin:30px 125px}.desc{padding:0 15px;text-align:center}.user-infor{padding:15px}.song{line-height:100px;padding-left:25px}.video{width:400px;height:226px;background:#222;margin:0 25px;box-shadow:0 10px #660000}.friend-col,.gallery-col{width:440px;padding:10px;height:auto}.row{width:250px;height:60px;display:flex;margin-bottom:20px;background:#660000;border-radius:30px;box-shadow:5px 5px 10px rgba(0,0,0,.2)}.avatar{width:60px;height:60px;background:#fff;padding:5px}.avatar img{width:50px;height:50px}.infor{position:relative;padding:10px;width:calc(100% - 60px)}.infor a{position:absolute;width:80px;height:30px;line-height:30px;text-align:center;font-size:.6em;color:#fff;background:#222;box-shadow:0 0 0 5px #eee inset;right:30px;top:40px}.infor span,.infor p{color:#222;font-size:.8em;line-height:20px}.gallery-col img{width:440px;height:auto;filter:grayscale(1);margin-bottom:30px;transition:all .3s ease-out}.gallery-col img:hover{filter:grayscale(0)}::-webkit-scrollbar{width:5px;background:#222}::-webkit-scrollbar-thumb{background:#020202}.footer{width:100%;line-height:50px;position:absolute;bottom:0;text-align:center;color:#222;}
  2. div#nowayfixed { }
  3. div#nowayfixed {
  4. z-index: 2147483647;
  5. position: fixed;
  6. bottom: 0;
  7. left: 0;
  8. }
  9. div#nowaymenu
  10. {
  11. background-color:#009;
  12. background: linear-gradient(#000014, #000024, #00004e);
  13. border-radius: 0px 5px 0px 0px;
  14. display: none;
  15. FONT-SIZE: 12pt;
  16. FONT-FAMILY: Arial, Helvetica, sans-serif;
  17. }
  18. div#nowayitems
  19. {
  20. padding-top: 5px;
  21. padding-right: 0px;
  22. /*padding-bottom: 5px;*/
  23. padding-left: 0px;
  24. margin-left: 6px;
  25. line-height: 130%;
  26. color:#fff;
  27. }
  28. div#nowayitems > a
  29. {
  30. color:#fff;
  31. text-decoration: none;
  32. }
  33. div#nowayitems > a:hover {
  34. text-decoration: underline;
  35. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement