diff --git a/static/src/css/pylote.css b/static/src/css/pylote.css index 88e325554a0f3091519ebcc874d95381828e25a8..89d6a7713bd5607ac9b415ce4405c589a30938f2 100644 --- a/static/src/css/pylote.css +++ b/static/src/css/pylote.css @@ -42,7 +42,7 @@ h1{ } h2{ - font-size: 40px; + font-size: 35px; font-weight: 500; } @@ -178,6 +178,14 @@ li#menu-contact .btn-primary{ /*Navigation*/ +header .navbar-brand.logo .logo-mobile{ + height: 60px; + padding: 5px 15px; +} + +.navbar-collapse{ + margin-top: 40px; +} li.nav-item.active a{ border-bottom: 2px solid #fff; @@ -383,6 +391,8 @@ footer, footer .btn-primary{ height: 220px; background-size: cover; background-repeat: no-repeat; + background-position: center; + position: relative; } .banner-contact h1{ @@ -437,9 +447,11 @@ form label{ .our-company-banner{ background-image: url("/pylote_website/static/src/img/fond-banner-mobil.png"); height: auto; + display: flex; background-size: cover; background-repeat: no-repeat; - display: flex; + background-position: center; + position: relative; } .our-company-banner h6{ @@ -494,12 +506,16 @@ form label{ height: 200px; background-size: cover; background-repeat: no-repeat; + background-position: center; + position: relative; } .home-banner{ + display: flex; + align-items: flex-end; + height: 390px; margin-bottom: 0px; margin-top: 126px; - height: auto; background-image: url("/pylote_website/static/src/img/banner-home-mobil.png"); } @@ -512,9 +528,11 @@ form label{ .img-absolute-right{ position: absolute; - z-index: 100; width: 427px; right: 40px; + z-index: 100; + width: 200px; + right: -100px; } .img-absolute-left{ @@ -525,8 +543,9 @@ form label{ } .home-banner img{ - width: 500px; - z-index: 1; + width: 200px; + z-index: inherit; + top: 0; } .our-company-banner img{ @@ -565,6 +584,7 @@ form label{ .home-header-title h1{ font-size: 24px; line-height: 26px; + margin-bottom: 15px; } .home-header-title h1, .home-header-title p{ @@ -640,6 +660,7 @@ hr{ .circle-home-border{ background-image: url("/pylote_website/static/src/img/bord-cercle.png"); background-size: contain; + background-repeat: no-repeat; margin: 0 auto; display: flex; flex-direction: column; @@ -669,8 +690,8 @@ hr{ #cleaner h2{ text-align: center; - font-size: 31px; - line-height: 37px; + font-size: 22px; + line-height: 30px; } #cleaner h6{ @@ -682,15 +703,15 @@ hr{ } #cleaner .circle-home-border{ - width: 190px; - height: 190px; + width: 110px; + height: 110px; } #cleaner .circle-home-border h1{ margin: 0 auto; text-transform: uppercase; - font-size: 29px; - line-height: 17px; + font-size: 15px; + line-height: 10px; font-weight: 900; } @@ -737,7 +758,7 @@ h2 span{ .sol-box{ padding-left: 0px; - border-left: 1px solid #56A099; + border-left: 2px solid #56A099; } .sol-box h5{ @@ -1005,21 +1026,24 @@ h2 span{ padding: 0; } -.bloc-part ul {list-style: none} +.bloc-part ul { + line-height: 25px; + list-style: none; +} + .bloc-part li::before { - content: "•"; - color: #56A099; - display: inline-block; - width: 15px; - font-size: 30px; + content: "•"; + color: #56A099; + display: inline-block; + width: 15px; + font-size: 30px; } .bloc-part li{ - height: 25px; margin: 0 auto; display: flex; + justify-content: center; flex-direction: row; - align-items: center; } .on-environment-banner{ @@ -1028,12 +1052,15 @@ h2 span{ background-size: cover; display: flex; align-items: center; - background-repeat: no-repeat; + background-repeat: no-repeat; + background-position: center; + position: relative; } .on-environment-banner img{ position: absolute; right: 0; + top: 0; width: 300px; } @@ -1056,6 +1083,8 @@ h2 span{ padding: 30px 35px; display: flex; flex-direction: column; + justify-content: center; + margin: 5px; } .env-bloc h3, .level-subbloc h3, #on-accompaniment h3{ @@ -1087,7 +1116,7 @@ h2 span{ width: 100px; background-color: #56A099; display: block; - margin: 15px 0px; + margin: 16px 0px; } .level-subbloc{ @@ -1103,7 +1132,7 @@ h2 span{ } .level-subbloc-img{ - width: 50%; + width: 100%; margin: 0 auto; } @@ -1172,6 +1201,8 @@ h2 span{ height: 350px; background-size: cover; background-repeat: no-repeat; + background-position: center; + position: relative; } #on-accompaniment h3:after{ @@ -1186,11 +1217,11 @@ h2 span{ /*Markets Snippets*/ h2.o_default_snippet_text { text-align: center; - font-size: 31px; + font-size: 22px; } h2 span.o_default_snippet_text{ - font-size: 30px; + font-size: 22px; } h2.o_default_snippet_text:after{ @@ -1206,6 +1237,10 @@ h2.o_default_snippet_text:after{ flex-direction: column; justify-content: center; } + +.carousel-left-img{ + padding: 0px 60px; +} /* .carousel-right h6{ color: #56A099; @@ -1216,14 +1251,9 @@ h2.o_default_snippet_text:after{ } .carousel-right-inner .circle-home-border{ - width: 90px; - height: 90px; - margin: 0; -} - -.carousel-right-inner .circle-home{ width: 80px; height: 80px; + margin: 0; } .carousel-right-inner .circle-home p{ @@ -1249,6 +1279,11 @@ h2.o_default_snippet_text:after{ text-align: left; text-transform: uppercase; margin-bottom: 0; + font-size: 14px; +} + +.circle-home-border p.o_default_snippet_text{ + font-size: 11px; } .s_carousel.s_carousel_default .carousel-control-prev-icon:before, .s_carousel.s_carousel_default .carousel-control-next-icon:before, .s_quotes_carousel.s_carousel_default .carousel-control-prev-icon:before, .s_quotes_carousel.s_carousel_default .carousel-control-next-icon:before{ @@ -1259,6 +1294,30 @@ h2.o_default_snippet_text:after{ margin-top: -450px; } +/*.carousel-control-prev-icon { + background-image: url("/pylote_website/static/src/img/arrow-left.png"); +} + +.carousel-control-next-icon { + background-image: url("/pylote_website/static/src/img/arrow-right.png"); +} +*/ +.carousel-control-prev, .carousel-control-next{ + align-items: inherit; + top: 140px; + margin: 0px 5px; +} + +.carousel-left-img { + height: 280px; +} + +.carousel-control-prev span, +.carousel-control-next span{ + width: 11px; + height: 22px; +} + .carousel-right-partner{ text-align: center; } diff --git a/static/src/css/pylote_mobil.css b/static/src/css/pylote_mobil.css index 93b75e01ff345342c5030a1224aa99cc921bbe88..f3e4bf0f519acf49c6de16ec376c18b3d076d5d2 100644 --- a/static/src/css/pylote_mobil.css +++ b/static/src/css/pylote_mobil.css @@ -1,5 +1,9 @@ @media (min-width: 768px) { + h2{ + font-size: 40px; + } + .home-header-title h1{ font-size: 53px; line-height: 57px; @@ -10,6 +14,16 @@ font-size: 26px; } + .navbar-collapse{ + margin-top: 0; + } + + + .img-absolute-right{ + width: 427px; + right: 40px; + } + #our-mission .d-flex img{ margin: 0; } @@ -53,6 +67,11 @@ border-left: 1px solid #fff; } + .bloc-part li{ + justify-content: inherit; + } + + .o_footer{ text-align: left; } @@ -78,6 +97,7 @@ .level-subbloc-img{ margin: 0; + width: 50%; } #on-compliance p{ @@ -90,7 +110,7 @@ .home-bloc{ border: 1px solid #E7F1FC; - height: 354px; + height: 390px; width: 329px; padding: 0px 10px; } @@ -124,12 +144,17 @@ } .home-banner{ - height: 675px; + display: inherit; + height: 667px; margin-top: 0px; margin-bottom: 140px; background-image: url("/pylote_website/static/src/img/banner-home.png"); } + .home-banner img{ + width: 500px; + } + .our-company-banner{ background-image: url("/pylote_website/static/src/img/fond-banner.png"); } @@ -192,6 +217,18 @@ #cleaner h2{ text-align: left; + font-size: 31px; + line-height: 37px; + } + + #cleaner .circle-home-border{ + width: 190px; + height: 190px; + } + + #cleaner .circle-home-border h1{ + font-size: 29px; + line-height: 17px; } .carousel-text-right-inner{ @@ -207,6 +244,27 @@ text-align: left; } + .carousel-right-inner .circle-home-border{ + width: 90px; + height: 90px; + } + + .carousel-text-right-inner p{ + font-size: 16px; + } + + .carousel-control-prev, .carousel-control-next{ + align-items: center; + top: 0; + margin: 0; + } + + + .circle-home-border p.o_default_snippet_text{ + font-size: 16px; + } + + .link-bottom a{ margin: 0; display: initial; @@ -233,6 +291,11 @@ h2.o_default_snippet_text { text-align: left; + font-size: 31px; + } + + h2 span.o_default_snippet_text{ + font-size: 30px; } } diff --git a/static/src/img/._arrow-left.png b/static/src/img/._arrow-left.png new file mode 100644 index 0000000000000000000000000000000000000000..20a7b5f1f28382508c9795c4496c7cdd0767161a Binary files /dev/null and b/static/src/img/._arrow-left.png differ diff --git a/static/src/img/._arrow-right.png b/static/src/img/._arrow-right.png new file mode 100644 index 0000000000000000000000000000000000000000..d8928d0044c4da78de94d8e996fbf706750005c9 Binary files /dev/null and b/static/src/img/._arrow-right.png differ diff --git a/static/src/img/._banner-home.png b/static/src/img/._banner-home.png index 8f10df5e7037b0d17491f49955e198d997dbc0a0..79b2e9c3e7078633bd4e3037af163b273368a425 100644 Binary files a/static/src/img/._banner-home.png and b/static/src/img/._banner-home.png differ diff --git a/static/src/img/._banner-home2.png b/static/src/img/._banner-home2.png new file mode 100644 index 0000000000000000000000000000000000000000..b8750a7c43e3ba2094a40daeef889a18bed50807 Binary files /dev/null and b/static/src/img/._banner-home2.png differ diff --git a/static/src/img/._etoile-mobile-home.png b/static/src/img/._etoile-mobile-home.png new file mode 100644 index 0000000000000000000000000000000000000000..b9528585d6579dbef60c0edacb395e3a510bdc12 Binary files /dev/null and b/static/src/img/._etoile-mobile-home.png differ diff --git a/static/src/img/._logo-pylote-sans-text.png b/static/src/img/._logo-pylote-sans-text.png new file mode 100644 index 0000000000000000000000000000000000000000..522e947d1656b0974ddea16bb0f7e921c038c8eb Binary files /dev/null and b/static/src/img/._logo-pylote-sans-text.png differ diff --git a/static/src/img/arrow-left.png b/static/src/img/arrow-left.png new file mode 100644 index 0000000000000000000000000000000000000000..d0021e6a229c760bfbc3fe0c3c2f455668918f6d Binary files /dev/null and b/static/src/img/arrow-left.png differ diff --git a/static/src/img/arrow-right.png b/static/src/img/arrow-right.png new file mode 100644 index 0000000000000000000000000000000000000000..37d7257911a6e39190970089fa9087942f7d5d67 Binary files /dev/null and b/static/src/img/arrow-right.png differ diff --git a/static/src/img/banner-home.png b/static/src/img/banner-home.png index 7b6ba27f01114ea5cd5cd4a9c6a8c433eeb77a06..3213c355bb7c7097998689b3769faaa3b97d1f36 100644 Binary files a/static/src/img/banner-home.png and b/static/src/img/banner-home.png differ diff --git a/static/src/img/banner-home2.png b/static/src/img/banner-home2.png new file mode 100644 index 0000000000000000000000000000000000000000..7b6ba27f01114ea5cd5cd4a9c6a8c433eeb77a06 Binary files /dev/null and b/static/src/img/banner-home2.png differ diff --git a/static/src/img/etoile-mobile-home.png b/static/src/img/etoile-mobile-home.png new file mode 100644 index 0000000000000000000000000000000000000000..599050b901f978b8504857eb137004040aa2830c Binary files /dev/null and b/static/src/img/etoile-mobile-home.png differ diff --git a/static/src/img/logo-pylote-sans-text.png b/static/src/img/logo-pylote-sans-text.png new file mode 100644 index 0000000000000000000000000000000000000000..bfa1f433ceced09c645f74187ea0c22d42fb2f14 Binary files /dev/null and b/static/src/img/logo-pylote-sans-text.png differ diff --git a/views/home.xml b/views/home.xml index 277bc3321ec6527ca39cbdcab5173fd9539e29f9..c63948c90a42878e4f8a54d51dedb23beff68d40 100644 --- a/views/home.xml +++ b/views/home.xml @@ -5,7 +5,8 @@ <xpath expr="//div[@id='wrap']" position="replace"> <div id="wrap" class="oe_structure oe_empty"> <div class="home-banner"> - <!-- <img src="/pylote_website/static/src/img/etoile-picto-home.png" class="d-none d-sm-block-pylote img-absolute img img-responsive" /> --> + <img src="/pylote_website/static/src/img/etoile-picto-home.png" class="d-none d-sm-block-pylote img-absolute img img-responsive" /> + <img src="/pylote_website/static/src/img/etoile-mobile-home.png" class="d-block d-sm-none-pylote img-absolute img img-responsive" /> <div class="container"> <div class="home-header-title pt-5 pb-3"> <h1>The unique integrated <br/>natural protection</h1> @@ -295,7 +296,7 @@ </div> </div> <div class="banner-cleaner"> - <img src="/pylote_website/static/src/img/etoile-white.png" class="d-none d-sm-block-pylote img-absolute-right img img-responsive" /> + <img src="/pylote_website/static/src/img/etoile-white.png" class=" img-absolute-right img img-responsive" /> </div> <div class="container pt-5"> <h6>Evaluation of plastic surfaces against microbiological contamination</h6> @@ -305,7 +306,7 @@ <div class="col-md-4"> <img class="img img-responsive" src="/pylote_website/static/src/img/spray-img.png"/> </div> - <div class="col-md-4 pt-3 pr-5 pl-5"> + <div class="col-md-4 pt-3 pr-md-5 pr-sm-0 pl-md-5 pl-sm-0"> <h5><span>Issues</span></h5> <p>Eyedroppers are mainly contaminated by hands when handling the bottle, or by contact of the tip with the eyelids, lashes, conjunctivitis or tears. There is also a risk of cross-contamination when the same eye droppers are shared by several patients, especially in hospital environment or within the same family.</p> <h5><span>Risk</span></h5> @@ -333,7 +334,7 @@ <div class="col-md-4"> <img class="img img-responsive" src="/pylote_website/static/src/img/safer-img.png"/> </div> - <div class="col-md-4 pt-3 pr-5 pl-5"> + <div class="col-md-4 pt-3 pr-md-5 pr-sm-0 pl-md-5 pl-sm-0"> <h5><span>Issues</span></h5> <p>Cosmetics accessories retain micro-organisms, skin cells, sebum, etc… There are a perfect environment for micro-organisms’ growth.</p> <h5><span>Risk</span></h5> @@ -407,7 +408,7 @@ <div class="col-md-4"> <img class="img img-responsive" src="/pylote_website/static/src/img/spray-img.png"/> </div> - <div class="col-md-4 pt-3 pr-5 pl-5"> + <div class="col-md-4 pt-3 pr-md-5 pr-sm-0 pl-md-5 pl-sm-0"> <h5><span>Issues</span></h5> <p>Ophthalmic preparations are subject to microbiological contamination. Ophthalmic solutions used both for diagnostic and therapeutic purposes have found to be contaminated by pathogenic bacteria with reported rates as high as 70%, combined with severe ocular infections such as keratitis and endophthalmitis.</p> <h5><span>Risk</span></h5> @@ -451,7 +452,7 @@ <div class="col-md-4"> <img class="img img-responsive" src="/pylote_website/static/src/img/spray-img.png"/> </div> - <div class="col-md-4 pt-3 pr-5 pl-5"> + <div class="col-md-4 pt-3 pr-md-5 pr-sm-0 pl-md-5 pl-sm-0"> <h5><span>Issues</span></h5> <p>Unit-dose is one of the preservative-free eye solution. This is very effective in reducing the risk of inuse and cross-contamination. However, it is best adapted to treatment over a short period of time, and is questionable from an environmental point of view, especially regarding the overall emission of carbonfootprint throughout the product life cycle as well as the tremendous volume of waste generated.</p> <h5><span>Risk</span></h5> diff --git a/views/menu.xml b/views/menu.xml index 40a29ede9700082dc62e70769a5324310adb2017..8e5df179e9dab5a0e8099f77c2d9f36137afd22d 100644 --- a/views/menu.xml +++ b/views/menu.xml @@ -3,6 +3,9 @@ <template id="custom_navbar" name="Custom nav-bar" customize_show="True" inherit_id="website.layout"> + <!-- <xpath expr="//div[@class='collapse navbar-collapse']" position="before"> + <t t-call="website.language_selector"/> + </xpath> --> <xpath expr="//ul[@id='top_menu']" position="inside"> <li class="nav-item" id="menu-news"> <a role="menuitem" href="/blog/news" class="nav-link"> @@ -19,6 +22,13 @@ <attribute name="t-attf-class" add="#{'o_header_affix affix affixed'}" separator=" "/> </xpath> + <xpath expr="//a[@class='navbar-brand logo']" position="replace"> + <a href="/" class="navbar-brand logo"> + <img class="logo-mobile d-block d-sm-none-pylote" src="/pylote_website/static/src/img/logo-pylote-sans-text.png" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/> + <img class="d-none d-sm-block-pylote" t-att-src="'/logo.png?company=%s' % res_company.id" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/> + </a> + </xpath> + </template> </odoo> \ No newline at end of file diff --git a/views/page_our_differenciation.xml b/views/page_our_differenciation.xml index 0e66de16728e83919fc703472e78da3298e185f9..e91eeaa08aeec3009e1872becfa9bcddf9bebdbe 100644 --- a/views/page_our_differenciation.xml +++ b/views/page_our_differenciation.xml @@ -114,7 +114,7 @@ <ul> <li>100% high purity ceramic microspheres</li> <li>Homogeneously distributed into materials</li> - <li>Direct integration during conventional converting process, without any modification / impact / investment</li> + <li>Direct integration during conventional converting process, <br/>without any modification / impact / investment</li> <li>Large spectrum antimicrobial activity, without migration or interaction</li> </ul> </div> diff --git a/views/snippets.xml b/views/snippets.xml index 1068da0db503cc81e7e6eb429f8f2a7c2a95f24c..835b853e132117c34eb576d74e6ff3db51995ecf 100644 --- a/views/snippets.xml +++ b/views/snippets.xml @@ -11,8 +11,8 @@ <!-- #01 --> <div class="carousel-item active oe_custom_bg oe_img_bg " data-name="Slide"> <div class="container"> - <div class="row content pl-5 pr-5"> - <div class="carousel-content carousel-right col-lg-5"> + <div class="row content pr-md-5 pr-sm-0 pl-md-5 pl-sm-05"> + <div class="carousel-content carousel-right carousel-left-img col-lg-5"> <img class="img img-responsive" src="/pylote_website/static/src/img/stick-img.png"/> </div> <div class="carousel-content col-lg-7"> @@ -55,12 +55,10 @@ </ol> <!-- Controls --> <div class="carousel-control-prev" data-target="#myCarousel" data-slide="prev" role="img" aria-label="Previous" title="Previous"> - <span class="carousel-control-prev-icon"/> - <span class="sr-only">Previous</span> + <span><img class="img img-responsive" src="/pylote_website/static/src/img/arrow-left.png"/></span> </div> <div class="carousel-control-next" data-target="#myCarousel" data-slide="next" role="img" aria-label="Next" title="Next"> - <span class="carousel-control-next-icon"/> - <span class="sr-only">Next</span> + <span><img class="img img-responsive" src="/pylote_website/static/src/img/arrow-right.png"/></span> </div> </div> <div class="container pt-5 pb-5"> @@ -90,7 +88,7 @@ <div class="carousel-item active oe_custom_bg oe_img_bg " data-name="Slide"> <div class="container"> <div class="row content pl-5 pr-5"> - <div class="carousel-content carousel-right col-lg-7"> + <div class="carousel-content carousel-left-img carousel-right col-lg-7"> <img class="img img-responsive" src="/pylote_website/static/src/img/amcor-schema.png"/> </div> <div class="carousel-right carousel-right-partner carousel-content col-lg-5"> @@ -111,12 +109,10 @@ </ol> <!-- Controls --> <div class="carousel-control-prev" data-target="#myCarousel" data-slide="prev" role="img" aria-label="Previous" title="Previous"> - <span class="carousel-control-prev-icon"/> - <span class="sr-only">Previous</span> + <span><img class="img img-responsive" src="/pylote_website/static/src/img/arrow-left.png"/></span> </div> <div class="carousel-control-next" data-target="#myCarousel" data-slide="next" role="img" aria-label="Next" title="Next"> - <span class="carousel-control-next-icon"/> - <span class="sr-only">Next</span> + <span><img class="img img-responsive" src="/pylote_website/static/src/img/arrow-right.png"/></span> </div> </div> </template>