Advertisement
Guest User

code xatspace jason

a guest
Nov 18th, 2017
1,611
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.83 KB | None | 0 0
  1. background:#f8f8f8;} *{padding:0; margin:0; box-sizing:border-box;} :root{--font: 'Abel', sans-serif;} a{display:inline-block; text-align:center; text-decoration:none;} #main-jason{width:100%; height:100vh; background:url(https://s25.postimg.org/8foxh04hr/noise.png)top left repeat ,radial-gradient(#a9c9ff, #adbfff, #aa91ff 90%); font-family:var(--font); color:white; font-size:1em; overflow:hidden; position:relative; min-width:1080px;} #home-jason{width:100%; height:100vh; position:absolute; top:0; left:0;} .container-jason{width:480px; height:480px; position:relative; top:50%; left:50%; transform:translate(-50%, -50%); border:solid 5px white; border-radius:50%;} .navbar-jason{width:100%; height:100%; position:absolute;} .btn-navbar-jason{width:67px; height:67px; line-height:67px; font-size:2em; color:#ea638c; border-radius:50%; background:white; box-shadow:0 0 0 16px rgba(255,255,255,0), 0 0 0 33px rgba(255,255,255,0); position:relative;} .btn-navbar-jason:hover{animation:pulse .5s infinite ease-in-out;}  @keyframes pulse{0%{box-shadow:0 0 0 0 white, 0 0 0 0 white;} 100%{box-shadow:0 0 0 8px transparent, 0 0 0 16px transparent;}}  #position-1{transform:translate(420px, 101px);} #position-2{transform:translate(370px, 206px);} #position-3{transform:translate(277px, 307px);} #position-4{transform:translate(135px, 388px);} .center-jason{width:380px; height:380px; border-radius:50%; padding:10px; background:white; position:relative; top:50%; left:50%; transform:translate(-50% , -50%); overflow:hidden;} .img-princ-jason{width:360px; height:360px; border-radius:50%; position:absolute;} .title-jason , .subtitle-jason{position:relative; display:inline-block; background:rgba(255,255,255,.4); border-radius:4px; line-height:40px; text-align:center;} .title-jason{margin-top:160px; width:180px; margin-left:90px;} .subtitle-jason{width:260px; margin-top:10px; margin-left:50px; font-size:1.2em;} .social-jason{width:220px; height:50px; margin-top:20px; margin-left:70px; position:relative; display:flex; justify-content:center;} .btn-social-jason{width:50px; height:50px; margin:0 10px; background:rgba(255,255,255,.4); border-radius:50%; overflow:hidden;} #footer-jason{width:100%; position:absolute; display:inline-block; text-align:center; bottom:50px; font-size:.75em;} #video-jason, #friends-jason, #galery-jason{width:100%; height:100vh; background:rgba(0,0,0,.75); visibility:hidden; overflow:hidden; opacity:0; transition:all 0.3s; z-index:100; position:absolute;}  .menu-page-jason{position:absolute; width:460px; height:50px; right:30px; top:20px;} .btn-page-jason{width:100px; height:40px; line-height:40px; margin:0 5px; background:white; color:#ea638c; box-shadow:0 5px #ea638c; border-radius:4px; text-transform:uppercase; transition:all .4s; margin-top:5px} .btn-page-jason:hover{box-shadow:0 5px rgba(234,99,40,.4), 0 0 30px 20px rgba(0,0,0,.2);  background:#ea638c; color:white;} .box-video-jason{width:500px; height:283px; position:relative; top:50%; left:50%; transform:translate(-50%, -50%); box-shadow:0 10px #ea638c;}   #content-jason-3:target #friends-jason, #galery-jason{visibility:hidden; opacity:0;}  #content-jason-3:target #video-jason{visibility:visible; opacity:1;}   #content-jason-2:target #video-jason, #galery-jason{visibility:hidden; opacity:0;}  #content-jason-2:target #friends-jason{visibility:visible; opacity:1;}   #content-jason-1:target #video-jason, #friends-jason{visibility:hidden; opacity:0;}  #content-jason-1:target #galery-jason{visibility:visible; opacity:1;}   .bloco-friends-jason{width:350px; height:570px; margin-top:120px; margin-left:40%; border-left:solid 1px #ea638c; padding-left:20px;} .box-friends-jason{width:280px; height:100px; margin-bottom:17px; text-align:left; position:relative;} .img-friends-jason{width:100px; height:100px; padding:5px; border-radius:50%; background:#ea638c; position:relative; z-index:10;} .box-friends-jason h2{position:absolute; width:90px; height:40px; top:30px; left:50px; background:white; border-radius:50px; line-height:40px; padding-left:0; font-size:.6em; color:#ea638c; transition:all .3s;} .simbol-jason{width:40px; height:40px; display:inline-block; position:relative; right:-15px; text-align:center; font-size:2em; line-height:45px;} .box-friends-jason:hover h2{width:200px; padding-left:60px; font-size:1em; line-height:40px;} .box-galery-jason{width:530px; height:100vh; position:relative; overflow-y:scroll; padding:10px 10px; top:0; left:10%; background:black; border-right:5px solid #ea638c; border-left:solid 5px #ea638c;} .box-img-galery-jason{width:474px; height:380px; overflow:hidden; margin:10px 10px; display:inline-block;} .img-jason{width:474px; height:100%; filter:grayscale(1); transition:all .4s; cursor:pointer;} .box-img-galery-jason:hover .img-jason{transform:scale(1.4) rotate(8deg); filter:grayscale(0);}   ::-webkit-scrollbar{width:5px; background:white;}  ::-webkit-scrollbar-thumb{background:#aa91ff;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement