From ed2c30ec8a8985a4d71e9940688d20818bf58084 Mon Sep 17 00:00:00 2001 From: AlexisNP <39308709+AlexisNP@users.noreply.github.com> Date: Sun, 25 Aug 2019 20:01:24 +0200 Subject: [PATCH] RELEASE 1.12 - Fixed some errors and typos (for label without an id assigned, leftover div tag, "\" instead of "/"). - Removed fontawesome dependency in favour of icomoon, a lightweight icon font-based library. - Thanks to Juan, made it so the menu uses only CSS, without the need to call for jquery and app.js. - Removed some useless CSS. --- css/style-min.css | 2 +- css/style.css | 146 +++++++++++++++++++++++++++++++++++++--------- index.html | 50 ++++++++-------- 3 files changed, 144 insertions(+), 54 deletions(-) diff --git a/css/style-min.css b/css/style-min.css index eb19192..e7b1967 100644 --- a/css/style-min.css +++ b/css/style-min.css @@ -1 +1 @@ -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}} \ No newline at end of file +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 span{font-size:1.35em;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}#show-menu:checked~.menu-btn,.landing nav .menu .menu-btn:hover{color:#fff;background:#000}#show-menu~.menu-body .menu-item a{transform:scale(0);transform-origin:20px 20px}#show-menu:checked~.menu-body{display:flex}#show-menu:checked~.menu-body .menu-item a{transform:scale(1);transform-origin:20px 20px;transition:transform .5s cubic-bezier(.23,1,.32,1)}#show-menu:checked~.menu-body .menu-item:nth-child(1) a{transition-delay:.3s}#show-menu:checked~.menu-body .menu-item:nth-child(2) a{transition-delay:.2s}#show-menu:checked~.menu-body .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 .menu-body .menu-item:nth-child(1) a:hover{background:#00a0a3}.landing nav .menu .menu-body .menu-item:nth-child(2) a:hover{background:#9b1f82}.landing nav .menu .menu-body .menu-item:nth-child(3) a:hover{background:#ed0959}.landing nav .menu .menu-body .menu-item:nth-child(4) a:hover{background:#0073be}label.menu-btn{display:inline-block;vertical-align:middle;line-height:50px;text-align:center}.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 span{position:absolute;top:50%;right:10px;transform:translateY(-50%);color:rgba(0,0,0,.3);z-index:1;pointer-events:none}.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 span{font-size:3.5em}.extra-infos li p{margin-top:1.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}@font-face{font-family:icomoon;src:url(fonts/icomoon.eot?nab70s);src:url(fonts/icomoon.eot?nab70s#iefix) format('embedded-opentype'),url(fonts/icomoon.ttf?nab70s) format('truetype'),url(fonts/icomoon.woff?nab70s) format('woff'),url(fonts/icomoon.svg?nab70s#icomoon) format('svg');font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-home:before{content:"\e900"}.icon-cart:before{content:"\e93a"}.icon-credit-card:before{content:"\e93f"}.icon-envelop:before{content:"\e945"}.icon-bubbles:before{content:"\e96c"}.icon-user:before{content:"\e971"}.icon-lock:before{content:"\e98f"}.icon-trophy:before{content:"\e99e"}.icon-loop2:before{content:"\ea2e"}.icon-circle-down:before{content:"\ea43"}.icon-facebook:before{content:"\ea90"}.icon-twitter:before{content:"\ea96"}.icon-youtube:before{content:"\ea9d"}.icon-linkedin2:before{content:"\eaca"}@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}.extra-infos li{padding:.5rem}}@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}} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 826f9ed..9be5840 100644 --- a/css/style.css +++ b/css/style.css @@ -116,8 +116,8 @@ sup { .landing nav .my-cart a{ position: relative; } -.landing nav .my-cart svg{ - width: 25px; +.landing nav .my-cart span{ + font-size: 1.35em; vertical-align: middle; } .landing nav .my-cart .cart-itemcounter { @@ -151,6 +151,7 @@ sup { /* == MENU FORMATTING == */ /* Menu button */ +/* update by Juan */ .landing nav .menu { position: relative; color: #FFF; @@ -167,25 +168,32 @@ sup { border-radius: 50%; cursor: pointer; } -.landing nav .menu.active .menu-btn, +#show-menu:checked ~ .menu-btn, .landing nav .menu .menu-btn:hover { color: #FFF; background: #000; } /* Transformation effects */ -.landing nav .menu:not(.active) .menu-item a{ +/* style depends on show menu being checked rather than active, this replaces js */ +#show-menu ~ .menu-body .menu-item a +{ transform: scale(0); transform-origin: 20px 20px; - transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1); } -.landing nav .menu.active .menu-item a{ - transform: scale(100%); +#show-menu:checked ~ .menu-body +{ + display: flex; +} +#show-menu:checked ~ .menu-body .menu-item a +{ + transform: scale(1); transform-origin: 20px 20px; transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1); } -.landing nav .menu.active .menu-item:nth-child(1) a {transition-delay: 0.3s} -.landing nav .menu.active .menu-item:nth-child(2) a {transition-delay: 0.2s} -.landing nav .menu.active .menu-item:nth-child(3) a {transition-delay: 0.1s} + +#show-menu:checked ~ .menu-body .menu-item:nth-child(1) a {transition-delay: 0.3s} +#show-menu:checked ~ .menu-body .menu-item:nth-child(2) a {transition-delay: 0.2s} +#show-menu:checked ~ .menu-body .menu-item:nth-child(3) a {transition-delay: 0.1s} .landing nav .menu .menu-body { position: absolute; @@ -204,11 +212,21 @@ sup { background: #000; border-radius: 50%; } -/* Colour formatting */ -.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} +/* Colour formatting no need to depend on active */ +.landing nav .menu .menu-body .menu-item:nth-child(1) a:hover {background: #00a0a3} +.landing nav .menu .menu-body .menu-item:nth-child(2) a:hover {background: #9b1f82} +.landing nav .menu .menu-body .menu-item:nth-child(3) a:hover {background: #ed0959} +.landing nav .menu .menu-body .menu-item:nth-child(4) a:hover {background: #0073be} + +/* extra css so label behaves like a button */ +label.menu-btn +{ + display: inline-block; + vertical-align: middle; + line-height: 50px; + text-align: center; +} + /* MAIN SECTION (NEWS + FORM) */ .landing .news-container { @@ -299,16 +317,14 @@ sup { appearance: none; cursor: pointer; } -.landing .news-container form .select-wrapper svg { +.landing .news-container form .select-wrapper span { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); - color: #555; - z-index: 100; -} -.landing .news-container form select svg { - position: absolute; + color: rgba(0, 0, 0, 0.3); + z-index: 1; + pointer-events: none; } .landing .news-container form button { width: 100%; @@ -443,10 +459,11 @@ sup { .extra-infos li:not(:last-child) { border-right: solid 1px #E0E0E0; } -.extra-infos li img { - max-width: 50px; - max-height: 50px; - margin-bottom: .5rem; +.extra-infos li span { + font-size: 3.5em; +} +.extra-infos li p { + margin-top: 1.5rem; } /* =========== FREE TRIALS SECTION =========== */ @@ -716,6 +733,80 @@ footer .sitemap a:hover { background: #111; } +/* =========== FONTS =========== */ +/* icomoon icons */ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?nab70s'); + src: url('fonts/icomoon.eot?nab70s#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?nab70s') format('truetype'), + url('fonts/icomoon.woff?nab70s') format('woff'), + url('fonts/icomoon.svg?nab70s#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-home:before { + content: "\e900"; +} +.icon-cart:before { + content: "\e93a"; +} +.icon-credit-card:before { + content: "\e93f"; +} +.icon-envelop:before { + content: "\e945"; +} +.icon-bubbles:before { + content: "\e96c"; +} +.icon-user:before { + content: "\e971"; +} +.icon-lock:before { + content: "\e98f"; +} +.icon-trophy:before { + content: "\e99e"; +} +.icon-loop2:before { + content: "\ea2e"; +} +.icon-circle-down:before { + content: "\ea43"; +} +.icon-facebook:before { + content: "\ea90"; +} +.icon-twitter:before { + content: "\ea96"; +} +.icon-youtube:before { + content: "\ea9d"; +} +.icon-linkedin2:before { + content: "\eaca"; +} + + + + /* =========== MEDIA QUERIES =========== */ /* LAPTOPS */ @@ -779,6 +870,9 @@ and (max-width : 1060px) { .product-list { justify-content: space-around; } + .extra-infos li { + padding: 0.5rem; + } } /* PHONES */ @@ -931,4 +1025,4 @@ and (min-width : 700px) { .product-item:nth-child(3) { display: none; } -} +} \ No newline at end of file diff --git a/index.html b/index.html index 085bc65..80bfd11 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + Éditions Législatives @@ -16,10 +16,6 @@ - - - - @@ -35,32 +31,33 @@