-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.css
1 lines (1 loc) · 8.92 KB
/
styles.css
1
@import url(https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap);@-webkit-keyframes fadeUp{0%{opacity:0}4%{-webkit-transform:translateY(100px) rotate3d(1,.5,0,20deg);transform:translateY(100px) rotate3d(1,.5,0,20deg)}20%{opacity:0}45%{opacity:1}100%{opacity:1;-webkit-transform:translateY(0) rotate3d(1,0,0,0deg);transform:translateY(0) rotate3d(1,0,0,0deg)}}@keyframes fadeUp{0%{opacity:0}4%{-webkit-transform:translateY(100px) rotate3d(1,.5,0,20deg);transform:translateY(100px) rotate3d(1,.5,0,20deg)}20%{opacity:0}45%{opacity:1}100%{opacity:1;-webkit-transform:translateY(0) rotate3d(1,0,0,0deg);transform:translateY(0) rotate3d(1,0,0,0deg)}}@-webkit-keyframes bgIn{from{opacity:0;-webkit-transform:scale(1.1);transform:scale(1.1)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes bgIn{from{opacity:0;-webkit-transform:scale(1.1);transform:scale(1.1)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}*{-webkit-box-sizing:border-box;box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;color:#eeeef1}body h1{font-weight:800;font-size:32px;line-height:1.5}body h1 span{color:#eeeef1}body p{font-size:18px;line-height:38px;font-weight:300;letter-spacing:.75px}body a{font-size:18px;line-height:38px;font-weight:300;letter-spacing:.75px;text-decoration:none;color:#eeeef1}.card{background-color:#262836;-webkit-transform-origin:top center;transform-origin:top center;position:relative;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:32px;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:24px;border-radius:9px;top:0;opacity:0;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.card .card-title{font-size:22px;letter-spacing:0;font-size:semibold}.card .thumbnail{width:204px;height:138px;border-radius:8px}.card .time-stamp{font-size:12px;font-weight:700;position:absolute;bottom:40px;left:40px;background-color:#000;color:#55ad82;padding:6px 12px;border-radius:8px;opacity:0;-webkit-transform:translateY(6px);transform:translateY(6px);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.card:hover .time-stamp{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.card .content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:24px;height:100%}.card .content .info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px}.card .content .title{font-size:22px;font-weight:600px}.card .content .stats{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:32px;color:#7f8190}.card .content .stats span{margin-right:6px}.card .content .user img{width:50px;height:50px}.card .content .user .user-info{position:relative}.card .content .user.online>.user-info::after{position:absolute;content:"";width:8px;height:8px;background-color:#55ad82;right:0;-webkit-transform:translate(18px,3px);transform:translate(18px,3px);border-radius:8px}.card .content .stats{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:32px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#7f8190}.card .content .stats .stat{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.card .content .stats span{margin-right:6px;margin-left:6px}.card .content .user{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:12px}.card .content .user .user-photo{width:50px;height:50px}.card .content .user .verified{position:absolute;bottom:4px;left:38px;background:#459de4;border:2px solid #262836;width:15px;height:15px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:10px}.card .content .user .verified img{width:6px;height:6px}.card .content .user .user-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;padding-top:8px}.card .content .user .user-info p{font-size:14px;line-height:14px;font-weight:400px}.card .content .user .user-info .login{color:#7f8190}.card .like{height:27px;width:27px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#3b3d49;border-radius:100px}.card.liked .like{background-color:#da6863}.hero{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:start;align-content:flex-start;align-items:center;height:90vh}.nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#1f1d2b;border-right:1px solid #323233;padding:40px 40px;height:100vh;-ms-flex-item-align:start;align-self:flex-start;left:0;width:300px;z-index:99;-webkit-box-sizing:border-box;box-sizing:border-box}.nav ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px}.nav ul li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:20px;border-radius:8px}.nav ul li .icon{height:40px;width:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:8px}.nav ul li .icon img{height:20px;width:20px}.nav ul li p{color:#7f8190}.nav ul li.active .icon{background-color:#55ad82}.nav ul li.active p{color:#eeeef1}.wrapper{position:relative;padding:160px 40px;position:relative;height:100vh;width:100%;overflow-x:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:32px}.wrapper .bg{position:absolute;top:0;-o-object-fit:cover;object-fit:cover;width:100%;opacity:0;height:400px;-webkit-animation:bgIn 2s cubic-bezier(.42,0,.08,.98);animation:bgIn 2s cubic-bezier(.42,0,.08,.98);-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-direction:forwards;animation-direction:forwards;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.wrapper h1{opacity:0;-webkit-animation:fadeUp 1s cubic-bezier(.42,0,.08,.98);animation:fadeUp 1s cubic-bezier(.42,0,.08,.98);-webkit-animation-delay:.75s;animation-delay:.75s;letter-spacing:1px;-webkit-animation-direction:forwards;animation-direction:forwards;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}body{position:relative;min-height:100vh;width:100%;overflow:hidden;background-color:#1f1d2b;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.grid{position:relative;display:grid;margin:0 auto;gap:20px;row-gap:0;grid-template-columns:repeat(3,1fr);width:100%;max-width:1440px}.grid .span-3{grid-column:span 3}.grid .span-2{grid-column:span 2}.grid .span-1{grid-column:span 1}