-
Notifications
You must be signed in to change notification settings - Fork 3
/
style.css
1 lines (1 loc) · 4.05 KB
/
style.css
1
.intro,.timeline ul li.in-view::after{background:#f78166}a,time:hover{color:#0d1117}.option-input:checked,.timeline ul,body{background:#0d1117}*,::after,::before{margin:0;padding:0;box-sizing:border-box}body{font:16px/1.5 "Helvetica Neue",sans-serif;color:#fff;overflow-x:hidden;padding-bottom:50px}.intro{padding:20px 0}.container{width:90%;max-width:1200px;margin:0 auto;text-align:center}h1{font-size:2.5rem}.timeline ul li{list-style-type:none;position:relative;width:6px;margin:0 auto;padding-top:50px;background:#fff}.timeline ul li::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:inherit;z-index:1;transition:background .5s ease-in-out}.timeline ul li div{position:relative;bottom:0;width:400px;padding:15px;background:#f78166;visibility:hidden;opacity:0;transition:1s ease-in-out}.timeline ul li div::before{content:"";position:absolute;bottom:7px;width:0;height:0;border-style:solid}.timeline ul li:nth-child(odd) div{left:45px;transform:translate3d(200px,0,0)}.timeline ul li:nth-child(odd) div::before{left:-15px;border-width:8px 16px 8px 0;border-color:transparent #f78166 transparent transparent}.timeline ul li:nth-child(2n) div{left:-439px;transform:translate3d(-200px,0,0)}.timeline ul li:nth-child(2n) div::before{right:-15px;border-width:8px 0 8px 16px;border-color:transparent transparent transparent #f78166}time{display:block;font-size:1.2rem;font-weight:700;margin-bottom:0;cursor:pointer}.timeline ul li.in-view div{transform:none;visibility:visible;opacity:1}@media screen and (max-width:900px){.timeline ul li div{width:250px}.timeline ul li:nth-child(2n) div{left:-289px}}@keyframes scaleAnimation{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.25)}}.page-footer{position:fixed;right:0;bottom:100px;display:flex;align-items:center;padding:5px;color:#000;background:rgba(255,255,255,.65)}.page-footer-2,.page-footer-3{position:fixed;align-items:center;padding:5px;color:#000;background:rgba(255,255,255,.65);display:flex;right:0}.page-footer a,.page-footer-2 a,.page-footer-3 a{display:flex;margin-left:4px}.page-footer-2{bottom:60px}.page-footer-3{bottom:20px}input[type=text]{width:40%;padding:12px 20px;margin:8px 0;box-sizing:border-box}button,input[type=button],input[type=reset],input[type=submit]{background-color:#0d1117;border:none;color:#fff;padding:16px 32px;text-decoration:none;margin:4px 2px;cursor:pointer;border-radius:5%}a{text-decoration:none}@media screen and (max-width:600px){.timeline ul li{margin-left:20px}.timeline ul li div{width:calc(100vw - 91px)}#url{width:calc(100vw - 91px)!important}.timeline ul li:nth-child(2n) div{left:45px}.timeline ul li:nth-child(2n) div::before{left:-15px;border-width:8px 16px 8px 0;border-color:transparent #f78166 transparent transparent}.page-footer,.page-footer-2,.page-footer-3{display:none!important}}.option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;top:5px;right:0;bottom:0;left:0;height:20px;width:20px;transition:.15s ease-out;background:#cbd1d8;border:none;color:#fff;cursor:pointer;display:inline-block;margin-right:.5rem;outline:0;position:relative;z-index:1000}.option-input:hover{background:#9faab7}.option-input:checked::before{width:20px;height:20px;display:flex;content:"";font-size:25px;font-weight:700;position:absolute;align-items:center;justify-content:center;font-family:"Font Awesome 5 Free"}.option-input:checked::after{-webkit-animation:.65s click-wave;-moz-animation:.65s click-wave;animation:.65s click-wave;background:#0d1117;content:"";display:block;position:relative;z-index:100}.option-input.radio,.option-input.radio::after{border-radius:50%}@keyframes click-wave{0%{height:20px;width:20px;opacity:.35;position:relative}100%{height:100px;width:100px;margin-left:-40px;margin-top:-40px;opacity:0}}.containerbackground{margin:30px;position:relative;top:0;left:0;text-align:center;bottom:0;right:0;color:#fff;background-color:transparent!important}.containerbackground:hover{text-decoration:underline;background:#f78166;color:#f78166;cursor:pointer}