-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.min.css
1 lines (1 loc) · 3.96 KB
/
styles.min.css
1
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700");html{font-size:10px}body{margin:0;padding:0;font-size:1.6rem;background-color:#263238;background-color:#202941;font-family:'Josefin Sans', sans-serif}.header{width:100%;height:250px;background:linear-gradient(45deg, #4FC3F7, #03A9F4 40%, #0288D1 65%, #3F51B5 109%);border-bottom-left-radius:40px;border-bottom-right-radius:40px;box-shadow:0px 10px 15px -5px rgba(0,0,0,0.5);display:flex;flex-direction:column;align-items:center}.header .title-container{height:100%}.header .title-container .heading{padding:40px 45px 0px 35px;color:white;font-size:5.7rem;font-weight:600;line-height:5rem;letter-spacing:-1px;word-spacing:-5px}.header .title-container .subtitle{padding:10px 0px 0px 40px;color:rgba(255,255,255,0.6);font-size:2.4rem}@media screen and (max-width: 415px){.header .heading{font-size:5.3rem !important;padding-top:40px !important}}@media screen and (max-width: 390px){.header .heading{padding-right:30px !important;padding-top:20px !important}}@media screen and (min-width: 450px){.header .title-container{text-align:center;max-width:500px}.header .title-container .subtitle{padding:0 !important;padding-top:20px !important}}.main{width:90%;margin:0 auto;margin-top:40px;color:white}.main .main-title{color:rgba(255,255,255,0.6);font-size:2rem;padding-left:10px}.main .new-button{position:fixed;right:25px;bottom:40px;width:80px;height:80px;background:linear-gradient(45deg, #4FC3F7, #03A9F4 40%, #0288D1 65%, #3F51B5 109%);border-radius:50%;text-align:center;font-size:2.4rem;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:default;box-shadow:0px 10px 20px -5px rgba(0,0,0,0.5);transition:all 300ms ease-in-out}.main .new-button:hover{transform:scale(1.05);box-shadow:0px 20px 20px -5px rgba(0,0,0,0.3)}.main .res-form{position:fixed;width:80vw;max-width:500px;background:pink;background:linear-gradient(to bottom, #D81B60, #EC407A 40%, #F06292 65%, #F48FB1 109%);top:50%;left:50%;transform:translate(-50%, -50%) scale(0);border-radius:10px;opacity:0;transition:all 300ms ease-in-out}.main .res-form.fade-in{opacity:1;transform:translate(-50%, -50%) scale(1)}.main .res-form.is-sent{animation:launch 1s ease-in-out}.main .res-form h3{font-size:2.6rem;padding:10px;text-align:center;margin:30px auto 20px auto}.main .res-form textarea{position:relative;left:50%;transform:translateX(-50%);margin:30px auto 100px auto;padding:10px;width:65%;height:100px;border:3px solid #cccccc;border-radius:10px;outline:none;font-size:2rem;resize:none}.main .res-form textarea::-webkit-scrollbar{width:6px}.main .res-form textarea::-webkit-scrollbar-track{-webkit-border-radius:10px;border-radius:10px}.main .res-form textarea::-webkit-scrollbar-thumb{-webkit-border-radius:10px;border-radius:10px;background:rgba(0,0,0,0.5)}.main .res-form .submit{position:absolute;right:20px;bottom:20px;height:60px;width:60px;background:white;border-radius:50%;box-shadow:0px 10px 20px -5px rgba(0,0,0,0.5);transition:all 300ms ease-in-out}.main .res-form .submit .fa{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);color:#D81B60;font-size:2rem;transition:all 300ms ease-in-out}.main .res-form .submit:hover{transform:scale(1.05);box-shadow:0px 15px 25px -10px rgba(0,0,0,0.3)}.main .res-form .submit:hover .fa{transform:translate(-50%, -50%) scale(1.05)}.main .card{margin-top:40px;background:pink;background:linear-gradient(to right, #D81B60, #EC407A 40%, #F06292 65%, #F48FB1 109%);padding:20px 20px 20px 10px;border-radius:10px}.main .card:last-of-type{margin-bottom:50px}.main .card h2{margin:20px auto 20px auto;text-align:left;padding:0;max-width:90%;word-wrap:break-word}@keyframes launch{0%{opacity:1;transform:translate(-50%, -50%) scale(1)}10%,20%{transform:translate(-50%, -20%) scale(1)}40%,70%{transform:translate(-50%, -100vh) scale(1);opacity:0.5}71%{opacity:0;transform:translate(-50%, -100vh) scale(0.6)}72%{opacity:0;transform:translate(-50%, -50%) scale(0.6)}100%{transform:translate(-50%, -50%) scale(0);opacity:0}}