Made buttons more consistent and more appealing. Added a minified CSS file. Added favicons.
1 line
14 KiB
CSS
1 line
14 KiB
CSS
a,address,article,b,body,code,div,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,img,label,li,menu,nav,p,q,s,span,sup,ul{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}input,select{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}ul{list-style-type:none}a{color:inherit;text-decoration:none}button:focus,input:focus,select:focus{outline:0}body,input{font-family:'Open Sans',serif;color:#111}.contact-info,.sitemap,body>:not(footer){padding-right:17.5%;padding-left:17.5%}h1{font-size:1.3em;font-weight:600}p{font-size:.92em;font-weight:400}b{font-weight:600}sup{vertical-align:super;font-size:70%}.landing{min-height:90vh;padding-top:2.5rem;padding-bottom:5rem;background:url(../img/landing-background.jpg);background-size:cover;background-repeat:no-repeat}.landing header{display:flex;justify-content:space-between;align-items:center}.logo{max-width:150px}.landing nav{display:flex;align-items:center}.landing nav>*{margin-left:2.5rem}.landing .phone{display:flex;align-items:center}.landing .phone address{font-size:.95em;font-weight:600}.landing .phone .free-tooltip{margin-left:10px;padding:2px 5px;font-size:.75em;color:#fff;background:#00a0a3;border-radius:10px}.landing nav .my-cart a{position:relative}.landing nav .my-cart svg{width:25px;vertical-align:middle}.landing nav .my-cart .cart-itemcounter{position:absolute;top:-5px;right:-5px;width:15px;height:15px;font-size:.7em;font-weight:600;text-align:center;color:#fff;background:#ed0959;border-radius:50%}.landing nav .login-btn{padding:10px 25px;font-size:.75em;font-weight:600;color:#111;background:#fff;border-radius:25px;border:none;cursor:pointer}.landing nav .login-btn:hover{color:#fff;background:#111}.landing nav .menu{position:relative;color:#fff;border-radius:50%}.landing nav .menu-btn{width:50px;height:50px;font-size:.65em;font-weight:600;color:#000;background:#fff;border:none;border-radius:50%;cursor:pointer}.landing nav .menu .menu-btn:hover,.landing nav .menu.active .menu-btn{color:#fff;background:#000}.landing nav .menu:not(.active) .menu-item a{transform:scale(0);transform-origin:20px 20px;transition:transform .5s cubic-bezier(.23,1,.32,1)}.landing nav .menu.active .menu-item a{transform:scale(100%);transform-origin:20px 20px;transition:transform .5s cubic-bezier(.23,1,.32,1)}.landing nav .menu.active .menu-item:nth-child(1) a{transition-delay:.3s}.landing nav .menu.active .menu-item:nth-child(2) a{transition-delay:.2s}.landing nav .menu.active .menu-item:nth-child(3) a{transition-delay:.1s}.landing nav .menu .menu-body{position:absolute;right:0;margin-top:10px;display:flex;text-align:center}.landing nav .menu .menu-body .menu-item a{width:40px;height:40px;position:relative;margin-right:15px;display:block;line-height:40px;background:#000;border-radius:50%}.landing nav .menu.active .menu-body .menu-item:nth-child(1) a:hover{background:#00a0a3}.landing nav .menu.active .menu-body .menu-item:nth-child(2) a:hover{background:#9b1f82}.landing nav .menu.active .menu-body .menu-item:nth-child(3) a:hover{background:#ed0959}.landing nav .menu.active .menu-body .menu-item:nth-child(4) a:hover{background:#0073be}.landing .news-container{margin-top:5rem;display:flex;background:rgba(255,255,255,.95);border-bottom-left-radius:25px;-webkit-box-shadow:-3px 3px 6px rgba(0,0,0,.2);-moz-box-shadow:-3px 3px 6px rgba(0,0,0,.2);box-shadow:-3px 3px 6px rgba(0,0,0,.2)}.landing .news-container article{position:relative;padding:5rem 9rem 5rem 4rem}.landing .news-container article:after{position:absolute;top:5rem;right:0;content:"";display:block;height:140px;width:35px;background-image:linear-gradient(to bottom,#00a0a3 25%,#9b1f82 25%,#9b1f82 50%,#ed0959 50%,#ed0959 75%,#0073be 75%,#0073be 100%)}.landing .news-container article h1:after{content:"";display:block;width:40px;height:5px;margin:15px 0 20px;background:rgba(0,0,0,.14);transition:all .2s cubic-bezier(.39,.575,.565,1)}.landing .news-container article h1:hover{color:#0073be;transition:all .2s cubic-bezier(.39,.575,.565,1)}.landing .news-container article h1:hover:after{width:100px;background:#0073be;transition:all .2s cubic-bezier(.39,.575,.565,1)}.landing .news-container form{padding:2rem;display:flex;flex-flow:column;justify-content:center;background:url(../img/form-filter.png);background-size:cover;background-repeat:no-repeat}.landing .news-container form label{margin-bottom:.5rem;font-size:1.5em;font-weight:600}.landing .news-container form input,.landing .news-container form select{display:block;width:100%;min-width:300px;margin:.5rem 0;padding:10px 14px;color:#555;background:#fff;border:solid 1px rgba(0,0,0,.2);border-radius:16px}.landing .news-container form input:focus,.landing .news-container form select:focus{-moz-box-shadow:inset 0 0 5px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.1);box-shadow:inset 0 0 5px rgba(0,0,0,.1);border:solid 1px rgba(0,0,0,.3)}.landing .news-container form .select-wrapper{position:relative}.landing .news-container form select{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.landing .news-container form .select-wrapper svg{position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#555;z-index:100}.landing .news-container form select svg{position:absolute}.landing .news-container form button{width:100%;margin-top:.5rem;padding:10px 14px;font-weight:600;color:#fff;background:#111;border:none;border-radius:16px;cursor:pointer}.landing .news-container form button:hover{background:#0073be}.ourproducts{padding-top:4rem;padding-bottom:4rem}.ourproducts>header{display:flex;justify-content:center;align-items:center}.ourproducts>header label{font-size:.9em;font-weight:600}.ourproducts>header .btn-group{margin:0 1rem}.ourproducts>header .btn-group button{margin:5px 3px 5px;padding:10px 14px;font-size:.7em;font-weight:600;border:1px solid transparent;border-radius:16px;cursor:pointer}.ourproducts>header .btn-group button:not(.active){color:#777;background:0 0;border:1px solid #aaa}.ourproducts>header .btn-group button:not(.active):hover{color:#3a3a3a;background:#ddd;border:1px solid transparent}.ourproducts>header .btn-group button.active{color:#fff;background:#111}.ourproducts>footer a{background:#f1f2f6}.ourproducts .product-item:nth-child(1) footer a:hover,.ourproducts .product-item:nth-child(1) h3:after{background:#9b1f82;color:#fff}.ourproducts .product-item:nth-child(1) footer a:hover{border:1px solid transparent}.ourproducts .product-item:nth-child(1) footer a{color:#9b1f82;background:0 0;border:1px solid #9b1f82}.ourproducts .product-item:nth-child(2) footer a:hover,.ourproducts .product-item:nth-child(2) h3:after{background:#0073bf;color:#fff}.ourproducts .product-item:nth-child(2) footer a:hover{border:1px solid transparent}.ourproducts .product-item:nth-child(2) footer a{color:#0073bf;background:0 0;border:1px solid #0073bf}.ourproducts .product-item:nth-child(3) footer a:hover,.ourproducts .product-item:nth-child(3) h3:after{background:#00a0a3;color:#fff}.ourproducts .product-item:nth-child(3) footer a:hover{border:1px solid transparent}.ourproducts .product-item:nth-child(3) footer a{color:#00a0a3;background:0 0;border:1px solid #00a0a3}.extra-infos{background:#fbfbfb}.extra-infos h2{padding-top:4rem;font-size:1.2em;font-weight:600;text-align:center}.extra-infos ul{padding:4rem 0;display:flex;text-align:center}.extra-infos li{padding:1.5rem 1rem;font-size:.9em}.extra-infos li:not(:last-child){border-right:solid 1px #e0e0e0}.extra-infos li img{max-width:50px;max-height:50px;margin-bottom:.5rem}.freetrials{padding-top:5rem;padding-bottom:5rem;background-image:linear-gradient(to bottom,#00a0a3 40%,#f1f2f6 40%)}.freetrials>header{font-size:1.5em;color:#fff;text-align:center}.freetrials>header b{color:#77eef0}.freetrials>footer a{background:#fff}.freetrials .product-item .title{color:#fff}.freetrials .product-item footer a:hover,.freetrials .product-item h3:after{background:#00a0a3;color:#fff}.freetrials .product-item footer a:hover{border:1px solid transparent}.freetrials .product-item footer a{color:#00a0a3;background:0 0;border:1px solid #00a0a3}.newsletter{padding-top:4rem;padding-bottom:4rem;display:flex;flex-direction:column;align-items:center}.newsletter p{margin-bottom:1.5rem;font-size:1.2em;font-weight:600;text-align:center}.newsletter form{display:flex;min-width:50%}.newsletter form input{padding:15px 25px;flex:5;font-size:.9em;background:#f2f3f7;border:none;border-top-left-radius:20px;border-bottom-left-radius:20px}.newsletter form button{padding:15px 25px;font-size:.75em;font-weight:600;color:#fff;background:#ed0959;border:none;border-top-right-radius:20px;border-bottom-right-radius:20px;cursor:pointer}.newsletter form button:hover{background:#0073be}footer .contact-info{width:100%;padding-top:2rem;padding-bottom:2rem;display:flex;justify-content:space-between;align-items:center;text-align:center;background:#000}footer .contact-info .phone p{font-size:.8em;font-weight:600;color:#aaa}footer .contact-info .phone address{font-size:1.2em;font-weight:600;color:#fff}footer .contact-info .social-links{display:flex;color:#111}footer .contact-info .social-links li{margin:0 10px}footer .contact-info .social-links a{display:block;width:30px;height:30px;background:#fff;border-radius:25px;line-height:30px}footer .contact-info .social-links li:nth-child(1) a:hover{color:#fff;background:#3b5998}footer .contact-info .social-links li:nth-child(2) a:hover{color:#fff;background:#38a1f3}footer .contact-info .social-links li:nth-child(3) a:hover{color:#fff;background:#0077b5}footer .contact-info .social-links li:nth-child(4) a:hover{color:#fff;background:#c4302b}footer .sitemap{padding-top:4rem;padding-bottom:4rem;display:flex;justify-content:space-between;background:#1a171b}footer .sitemap h4{color:#fff;font-size:.9em;font-weight:600}footer .sitemap h4:after{content:"";display:block;width:20px;height:3px;margin:10px 0;background:#fff}footer .sitemap a{font-size:.75em;font-weight:600;color:grey;text-transform:uppercase}footer .sitemap a:hover{color:#fff}.product-list{padding:3rem 0;display:flex;justify-content:center;flex-flow:row wrap}.product-item{max-width:300px;min-width:300px;margin-bottom:2rem}.product-item:nth-child(1){margin-right:15px}.product-item:nth-child(2){margin:0 15px}.product-item:nth-child(3){margin-left:15px}.product-item .title{margin-bottom:.75rem;font-size:.75em;font-weight:600;color:#aaa}.product-card{padding:1.5rem;background:#fbfbfb;border:solid 1px #dfdfdf;border-bottom-left-radius:25px}.product-card header{display:flex;align-items:center;margin-bottom:1rem}.product-card header img{max-height:130px;max-width:130px;margin-right:1rem}.product-card header .price{padding-bottom:2rem;font-size:.9em;font-weight:600}.product-card h3{font-weight:600}.product-card h3:after{content:"";display:block;width:30px;height:5px;margin:10px 0}.product-card p{margin-bottom:1.5rem;font-size:.9em}.product-card footer a{display:inline-block;padding:10px 14px;font-size:.75em;font-weight:600;color:#fff;border-radius:20px}.freetrials>footer,.ourproducts>footer{display:flex;justify-content:center}.freetrials>footer a,.ourproducts>footer a{font-size:.9em;padding:10px 20px;border-radius:20px}.freetrials>footer a:hover,.ourproducts>footer a:hover{color:#fff;background:#111}@media only screen and (max-width :1500px){.contact-info,.sitemap,body>:not(footer){padding-right:10%;padding-left:10%}.landing .news-container article{padding:4rem 9rem 4rem 3rem}.landing .news-container article:after{top:4rem}}@media only screen and (max-width :1200px){.contact-info,.sitemap,body>:not(footer){padding-right:5%;padding-left:5%}.landing .news-container article{padding:2.5rem 4rem 2.5rem 2rem}.landing .news-container article:after{top:2.5rem}.ourproducts>header{display:block}.ourproducts>header label{margin-bottom:1rem;display:block;font-size:1.1em;font-weight:600;text-align:center}}@media only screen and (max-width :1060px){.contact-info,.sitemap,body>:not(footer){padding-right:2%;padding-left:2%}.product-list{justify-content:space-around}}@media only screen and (max-width :750px){.contact-info,.sitemap,body>:not(footer){padding-right:0;padding-left:0}.landing .news-container form,.landing .phone,.landing nav .login-btn{display:none}.landing{min-height:100vh;padding:2.5rem}.landing .news-container{margin-top:4rem}.landing .news-container article{padding:3rem 4rem}.landing .news-container article:after{top:0;height:100px;width:25px}.ourproducts{padding-top:2rem;padding-bottom:2rem}.ourproducts>header{padding:0 1rem}.extra-infos{display:none}.freetrials{padding:2rem;background:#00a0a3}.freetrials>header{padding-bottom:1rem}.product-item:nth-child(1),.product-item:nth-child(2),.product-item:nth-child(3){margin:0}.product-list{padding:1rem 0}.product-item{min-width:100%}.product-item .title{padding-left:1.5rem;font-size:.9em}.product-card{margin-bottom:1.5rem;padding:1.5rem 12vw;border:none;border-bottom-left-radius:0}.freetrials .product-card{border-top-right-radius:50px;border-bottom-left-radius:50px}.freetrials>footer a,.ourproducts>footer a{width:60%;text-align:center;font-size:.8em;padding:8px 10px}.newsletter{padding:2rem 1.5rem}.newsletter form{min-width:60%}footer .contact-info{display:block}footer .phone{display:none}footer .contact-info .social-links{margin-top:.75rem;justify-content:center}footer .sitemap{padding:2rem 1rem;flex-flow:row wrap}footer .sitemap>div{width:50%;margin-bottom:1rem}}@media only screen and (max-width :420px){.my-cart{display:none}.landing .news-container article{padding:2rem 2.5rem}.freetrials>footer a,.ourproducts>footer a{width:90%}.newsletter,footer .sitemap{padding:2rem .5rem}.newsletter form button,.newsletter form input{padding:15px}}@media only screen and (max-width :1069px) and (min-width :700px){.product-item:nth-child(3){display:none}} |