1 line
4.9 KiB
CSS
1 line
4.9 KiB
CSS
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(.8)}100%{transform:scale(1)}}@keyframes spin{0%{transform:rotate(30deg)}100%{transform:rotate(210deg)}}@keyframes spin2{0%{transform:rotate(150deg)}100%{transform:rotate(330deg)}}.btn{border-radius:50px}.container>p{margin-bottom:5vh}.splash{background:#090909;background-image:url(/static/img/style/map.jpg);background-size:cover;color:#FFF;height:100vh;overflow:hidden;position:relative}.splash:after,.splash:before{z-index:5;content:"";display:block;position:absolute;top:-40px;right:-40px;bottom:-40px;left:-40px}.splash:after{background:rgba(255,255,255,.05);transform:rotate(30deg);animation:spin 60s infinite linear}.splash:before{background:rgba(0,0,0,.5);transform:rotate(150deg);animation:spin2 50s infinite linear}.splash .container{position:relative;top:48%;transform:translateY(-50%);z-index:8}.splash h1{z-index:10;color:#fbc93d}.splash h2{z-index:10;margin-bottom:40px}.splash .btn{z-index:20;margin:0 20px 10px 0}.splash .btn:hover{color:#fff;background:rgba(0,0,0,.5)}.overview{text-align:center}.overview>div>div{float:left;width:33%;padding:0 40px 0 40px}.overview .fa{display:inline-block;color:#222;font-size:50px;width:100px;height:100px;border-radius:50px;background:#f6f6f6;margin-bottom:20px;padding-top:25px}.overview p{margin-bottom:0}.feature.app{background:#111}.feature{position:relative;overflow:hidden}.feature img{position:absolute;top:100px;right:55%}.feature:nth-of-type(even) img{right:auto;left:55%}.feature>div>div{width:50%;float:right}.feature>div>div>p{margin-bottom:40px}.feature:nth-of-type(even)>div>div{float:left}.feature ul{margin:0;padding:0}.feature ul li{display:block;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eee}.feature ul li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}.feature ul li h3{margin:0 0 5px 0}.feature ul li p:last-child{margin:0}.feature ul li .fa{float:left;font-size:30px;background:#fbc93d;color:#000;width:50px;height:50px;display:inline-block;text-align:center;padding-top:10px;border-radius:25px;margin-right:20px;margin-top:7px}.feature ul li p{overflow:hidden}.light{color:#222;position:relative;overflow:hidden}.light:after{content:"";display:block;position:absolute;top:-40px;right:-40px;bottom:-40px;left:-40px;background:rgba(255,255,255,.1);transform:rotate(30deg)}.light h2{margin-bottom:40px}.light .btn{color:#111;background:rgba(0,0,0,.1)}.light .btn:hover:not(.disabled){cursor:pointer;text-decoration:none;background:rgba(0,0,0,.2)}.pricing{text-align:center;background-color:#222}.pricing>h2{font-weight:300}.pricing>div>div{float:left;width:33%;margin-top:60px;background:#282828;padding:40px}.pricing>div>div h3{background:#555;color:#fff;display:block;margin:-40px -40px 35px -40px;padding:30px;position:relative}.pricing>div>div h3 span{display:block}.pricing>div>div h3 span .fa{margin:0 1px}.pricing>div>div .price{font-size:40px}.pricing>div>div:nth-of-type(2){width:calc(34% + 20px);margin:40px -10px 0 -10px;box-shadow:0 5px 20px -5px rgba(0,0,0,.3);position:relative;z-index:50}.pricing>div>div:nth-of-type(2) h3{background:#fbc93d;color:#555;display:block}.pricing ul{padding:0;margin:27px 0}.pricing ul li{display:block;line-height:40px;border-bottom:1px solid #eee}.pricing ul li:last-child{border-bottom:0}.join{background:#fbc93d}.join input,.join textarea{color:#111}.join .input{width:47%;float:left}.join .submit{width:47%;float:right}.join .input:nth-of-type(odd){margin-right:6%}.join .message{display:block;clear:both;float:none;padding-top:10px}.join .input input{display:inline-block;float:left;width:100%;background:rgba(255,255,255,.3);border:0;padding:10px 15px}.join .message textarea{display:block;width:100%;height:200px;background:rgba(255,255,255,.3);border:0;padding:10px 15px;resize:vertical}.join label{position:relative;z-index:10}.join label.input span,.join label.message span{display:inline-block;float:left}.join .submit{text-align:center;padding-top:10px}.join .submit .alert,.join .submit .btn{position:static;float:right}@media (max-width:800px){section{padding:80px 10px}.splash{height:auto;padding:150px 10px 80px 10px;text-align:center}.splash .container{position:relative;top:0;transform:none}.overview>div>div{padding:0 20px}.feature img{right:65%}.feature:nth-of-type(even) img{left:65%}.feature>div>div{width:60%}.pricing>div>div{width:100%!important;float:none;margin:0 0 20px 0!important;box-shadow:none!important}.pricing>div>div h3{background:#555!important;color:#fff!important}.pricing h2{margin-bottom:40px}}@media (max-width:600px){section{padding:40px 10px}.splash{padding:100px 10px 40px 10px}.overview>div>div{float:none;width:100%;margin-bottom:40px;padding:0}.overview>div>div:last-child{margin-bottom:0}.overview p{overflow:hidden}.feature img{display:none}.feature>div>div{width:100%;float:none}.join .input{display:block;width:100%;float:none}.join .input:nth-of-type(odd){margin-right:0}.join label{padding-top:10px}.join label:first-of-type{padding-top:0}} |