diff --git a/css/style-min.css b/css/style-min.css new file mode 100644 index 0000000..eb19192 --- /dev/null +++ b/css/style-min.css @@ -0,0 +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 diff --git a/css/style.css b/css/style.css index 363e7be..826f9ed 100644 --- a/css/style.css +++ b/css/style.css @@ -143,12 +143,10 @@ sup { border-radius: 25px; border: none; cursor: pointer; - transition: color 0.2s cubic-bezier(0.77, 0, 0.175, 1), background 0.2s cubic-bezier(0.77, 0, 0.175, 1); } .landing nav .login-btn:hover { color: #FFF; background: #111; - transition: color 0.2s cubic-bezier(0.77, 0, 0.175, 1), background 0.2s cubic-bezier(0.77, 0, 0.175, 1); } /* == MENU FORMATTING == */ @@ -174,7 +172,6 @@ sup { color: #FFF; background: #000; } - /* Transformation effects */ .landing nav .menu:not(.active) .menu-item a{ transform: scale(0); @@ -207,8 +204,6 @@ 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} @@ -221,7 +216,9 @@ sup { display: flex; background: rgba(255, 255, 255, 0.95); border-bottom-left-radius: 25px; - box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.2) + -webkit-box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.2); + -moz-box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.2); + box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.2); } /* News section */ @@ -282,9 +279,16 @@ sup { padding: 10px 14px; color: #555; background: #FFF; - border: solid 1px rgba(0, 0, 0, 0.1); + border: solid 1px rgba(0, 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, 0.1); + -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); + border: solid 1px rgba(0, 0, 0, 0.3); +} .landing .news-container form .select-wrapper { position: relative; } @@ -303,9 +307,6 @@ sup { color: #555; z-index: 100; } -.landing .news-container form select[disabled] { - color: red !important; -} .landing .news-container form select svg { position: absolute; } @@ -320,6 +321,9 @@ sup { border-radius: 16px; cursor: pointer; } +.landing .news-container form button:hover { + background: #0073be; +} /* =========== OUR PRODUCTS SECTION =========== */ /* General */ @@ -520,14 +524,14 @@ sup { font-size: 0.75em; font-weight: 600; color: #FFF; - background: #00a0a3; + background: #ed0959; border: none; border-top-right-radius: 20px; border-bottom-right-radius: 20px; cursor: pointer; } .newsletter form button:hover { - background: #32a44d; + background: #0073be; } /* =========== FOOTER SECTION =========== */ @@ -569,10 +573,23 @@ footer .contact-info .social-links a { border-radius: 25px; line-height: 30px; } - footer .contact-info .social-links a:hover svg.fa-facebook-f {color: #3b5998} - footer .contact-info .social-links a:hover svg.fa-twitter {color: #38A1F3} - footer .contact-info .social-links a:hover svg.fa-linkedin-in {color: #0077B5} - footer .contact-info .social-links a:hover svg.fa-youtube {color: #c4302b} + /* Hover logo colours */ + 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; + } /* Bottom Footer - Sitemap */ footer .sitemap { diff --git a/img/form-filter.png b/img/form-filter.png index 7ec19a6..44f2d4b 100644 Binary files a/img/form-filter.png and b/img/form-filter.png differ diff --git a/index.html b/index.html index bb48808..75583c5 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,9 @@ - - - + + +