-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
1 lines (1 loc) · 1.99 KB
/
style.css
1
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");* {font-family: "Open Sans", sans-serif;}.main-page {display: flex;padding: 50px 10px;width: 100%;height: 100vh;background-color: #212121;background-image: url(https://sun9-76.userapi.com/impf/Ll1MgMNbiIxc01ojr7YfiZoVGUaj7e8XDni4Ww/q2q4GAvLzGo.jpg?size=2560x1920&quality=96&sign=950c0259acac5fa6ed2369b5b31cc435&type=album);background-size: cover;background-position: center center;background-repeat: no-repeat;perspective: 1000px;overflow: hidden;}.card {position: relative;margin: auto;width: 100%;max-width: 350px;background-color: rgba(0, 0, 0, 0.2);backdrop-filter: blur(5px);border: 2px solid rgba(0, 0, 0, 0.5);border-radius: 10px;transition: .35s;cursor: pointer;overflow: hidden;z-index: 2;}.card:before {content: '';display: block;position: absolute;top: -50%;left: 0;width: 100%;height: 100px;background-color: rgba(255, 255, 255, 0.5);transform: skewY(-20deg);transition: .8s;z-index: 10;}.card:after {content: '';display: block;position: absolute;left: 0;bottom: -100%;width: 100%;height: 350px;background-color: rgba(255, 255, 255, 0.3);transform: skewY(-20deg);backdrop-filter: blur(1px);transition: .5s;z-index: 0;}.card:hover {box-shadow: 0px 15px 40px -15px #0a0a0a;transform: rotateX(15deg);}.card:hover:before {top: 120%;}.card:hover:after {bottom: -70px;}.card-wrap {position: relative;}.card-top {padding: 30px 25px;padding-bottom: 15px;}.card-photo {display: block;margin: 0 auto;width: 150px;height: 150px;border-radius: 50vh;object-fit: cover;}.card-name {margin-top: 15px;font-size: 44px;font-weight: 700;color: #fff;text-align: center;}.card-work {font-size: 16px;font-weight: 300;color: #fff;text-align: center;}.card-skill {position: relative;padding: 30px 25px;height: 100%;color: #fff;background-color: rgba(0, 0, 0, 0.3);backdrop-filter: blur(10px);}.card-skill-elem {display: block;position: relative;text-align: center;color: #fff;transition: .35s;z-index: 1;}.card-skill-elem + .card-skill-elem {margin-top: 10px;}