zaccaria.majid
1 line
3.9 KiB
CSS
1 line
3.9 KiB
CSS
:root{--dark:#333;--light:#fff;--neutral:#f6f6f6;--neutral-dark:#d1d1d1;--color:#5607d7;--color-light:#941ed2;--color-dark:#2719cd;--font-stack:'Josefin Sans','Montserrat','sans-serif';}body{display:flex;align-items:center;justify-content:center;background:url('data:image/svg+xml,%3Csvg width="300" height="300" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E') fixed;font-family:var(--font-stack);}body:before{content:'';width:400px;height:400px;background:linear-gradient(135deg,#ffa500,#ff4500);border-radius:50%;position:fixed;top:-50px;left:10vw;z-index:-1;}body:after{content:'';width:300px;height:300px;background:linear-gradient(135deg,#0ff,#00f);border-radius:50%;position:fixed;bottom:-50px;right:-5vw;z-index:-1;}.menu__button{--x:-50%;--y:0;--z:0;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#606c88,#3f4c6b);padding:10px 20px;border-radius:1.5rem 1.5rem 0 0;border:0;box-shadow:0 2px 40px -10px #f0f;color:#fff;font-size:16px;white-space:nowrap;position:fixed;bottom:0;left:50%;transform:translate3d(var(--x),var(--y),var(--z));cursor:pointer;z-index:105;}.menu__button[hidden]{--y:200%;}.menu__button div{display:flex;align-items:center;width:12px;height:12px;margin-right:20px;}.menu__button div div{display:table;height:1px;background:var(--light);box-shadow:0 4px 0 var(--light),0 -4px 0 var(--light);}.menu__overlay{width:100%;height:100%;background:rgba(0,0,0,.1);position:absolute;z-index:100;}.menu__body{--x:0;--y:0;--z:0;display:block;width:100%;background-color:#fff;padding-bottom:15px;border-top-left-radius:20px;border-top-right-radius:20px;box-shadow:0 -9px 50px -30px black;font-family:'Montserrat',sans-serif;position:absolute;bottom:0;z-index:105;transform:translate3d(var(--x),var(--y),var(--z));height:0%;transition:height .3s cubic-bezier(.54,.57,.36,.98) .2s;}.menu__body[hidden]{--y:150%;}.menu__body>*:not(:last-child){border-bottom:2px solid var(--neutral);}.menu__header{display:flex;justify-content:space-between;padding:15px 20px;}.menu__header label div{width:15px;height:15px;border:2px solid var(--dark);border-radius:50%;position:relative;transform:rotate(5.5rad);}.menu__header label div:after{content:'';width:2px;height:10px;background:var(--dark);position:absolute;top:100%;left:50%;transform:translateX(-50%);}.menu__header p{font-size:18px;font-weight:bold;vertical-align:center;white-space:nowrap;}.menu__header h3{font-weight:normal;}.menu__header button{display:flex;align-items:center;justify-content:center;width:25px;height:25px;background:var(--neutral-dark);border-radius:50%;cursor:pointer;}.menu__header button div{width:15px;height:3px;background:var(--light);position:relative;transform:rotate(5.5rad);}.menu__header button div:before{content:'';width:3px;height:15px;background:var(--light);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}.menu__links{display:flex;padding:10px 15px;font-weight:bold;overflow-x:auto;}.menu__links a{flex:1 1 1px;padding:10px 8px;color:var(--dark);text-decoration:none;white-space:nowrap;}.menu__contact{display:flex;padding:8px;}.menu__contact svg{width:100%;fill:var(--color);}.menu__contact a{flex:1 1 30%;padding:1.5rem;margin:5px;border-radius:8px;background:#d1d1d1;color:var(--color);text-align:center;font-size:14px;font-weight:bold;text-decoration:none;} |