diff --git a/css/style.css b/css/style.css index c31e888..c1d82d6 100644 --- a/css/style.css +++ b/css/style.css @@ -1,4 +1,4 @@ -/* CSS RESET */ +/* CSS RESETS */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; @@ -6,12 +6,493 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq font-size: 100%; font: inherit; vertical-align: baseline; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; +} +select, input, textarea { + 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 { + outline: none; } -body{ +/* === GENERAL RULES === */ +body { + font-family: 'Open Sans', serif; + color: #111; +} +body > *:not(footer), +.contact-info, +.sitemap { + padding-right: 17%; + padding-left: 17%; +} +h1 { + font-size: 1.3em; + font-weight: 600; +} +p { + font-size: 0.92em; + font-weight: 400; +} +b { + font-weight: 600; +} +sup { + vertical-align: super; + font-size: 70%; +} +input, textarea { font-family: 'Open Sans', serif; } -img{ - width: 20px; + +/* =========== LANDING SECTION =========== */ +.landing { + min-height: 90vh; + padding-top: 2.5rem; + padding-bottom: 5rem; + background: url("../img/landing-background.jpg"); + background-size: cover; + background-repeat: no-repeat; +} + +/* HEADER */ +.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; +} +/* Phone Number */ +.landing nav .phone { + display: flex; + align-items: center; +} +.landing nav .phone address { + font-size: 0.95em; + font-weight: 600; +} +.landing nav .phone .free-tooltip { + margin-left: 10px; + padding: 2px 5px; + font-size: 0.75em; + color: #FFF; + background: #00a0a3; + border-radius: 10px; +} +/* My Cart */ +.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: 0.7em; + font-weight: 600; + text-align: center; + color: #FFF; + background: #ed0959; + border-radius: 50%; + } +/* Log in button */ +.landing nav .login-btn { + padding: 10px 25px; + color: #111; + background: #FFF; + 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 button */ +.landing nav .menu-btn { + width: 40px; + height: 40px; + font-size: 0.65em; + font-weight: 600; + color: #FFF; + background: #000; + border: none; + border-radius: 25px; + cursor: pointer; +} + + +/* MAIN SECTION (NEWS + FORM) */ +.landing .news-container { + margin-top: 5rem; + 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) +} +/* NEWS */ +.landing .news-container article { + width: 65%; + padding: 5rem 9rem 5rem 4rem; +} +.landing .news-container article h1:after { + content: ""; + display: block; + width: 40px; + height: 5px; + margin: 15px 0 20px; + background: rgba(0, 0, 0, 0.14); + transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); +} +.landing .news-container article h1:hover { + color: #0073be; + transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); +} +.landing .news-container article h1:hover:after { + width: 100px; + background: #0073be; + transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); +} +/* FORM */ +.landing .news-container form { + width: 35%; + padding: 4.5rem 2rem 0 2rem; + background: url("../img/form-filter.png"); + background-size: cover; + background-repeat: no-repeat; +} +.landing .news-container form label { + margin-bottom: 0.5rem; + font-size: 1.5em; + font-weight: 600; +} +.landing .news-container form input, +.landing .news-container form select { + display: block; + width: 100%; + margin: 0.5rem 0; + padding: 10px 14px; + color: #a7a7a7; + border: solid 1px rgba(0, 0, 0, 0.1); + border-radius: 16px; +} +.landing .news-container form button { + width: 100%; + margin-top: 0.5rem; + padding: 10px 14px; + font-weight: 600; + color: #FFF; + background: #111; + border: none; + border-radius: 16px; + cursor: pointer; +} + +/* =========== OUR PRODUCTS SECTION =========== */ +.ourproducts { + padding-top: 4rem; + padding-bottom: 4rem; +} + +/* TAG HEADER */ +.ourproducts > header { + display: flex; + align-items: center; +} +.ourproducts > header label { + font-size: 0.9em; + font-weight: 600; +} +.ourproducts > header .btn-group { + margin: 0 1rem; +} +.ourproducts > header .btn-group button { + margin: 0 3px; + padding: 10px 14px; + font-size: 0.7em; + font-weight: 600; + background: #f3f4f8; + border: none; + border-radius: 16px; + 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); +} +.ourproducts > header .btn-group button.active { + 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); +} + +/* PRODUCT LIST */ +.product-list { + padding: 3rem 0; + display: flex; + justify-content: space-between; +} + +/* SINGLE ITEMS */ +.product-item { + width: 30%; + min-width: 250px; +} +.product-item .title { + margin-bottom: 0.75rem; + font-size: 0.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: 0.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: 0.9em; +} +.product-card footer a { + display: inline-block; + padding: 10px 14px; + font-size: 0.75em; + font-weight: 600; + color: #FFF; + border-radius: 20px; +} +/* FOOTER SECTION */ +.ourproducts > footer, +.freetrials > footer { + display: flex; + justify-content: center; +} +.ourproducts > footer a, +.freetrials > footer a { + font-size: 0.9em; + padding: 10px 20px; + border-radius: 20px; +} +.ourproducts > footer a { + background: #f1f2f6; +} +.freetrials > footer a { + background: #FFF; +} + +/* Colour formatting */ +.ourproducts .product-item:nth-child(1) h3:after, +.ourproducts .product-item:nth-child(1) footer a { + background: #9b1f82; +} +.ourproducts .product-item:nth-child(2) h3:after, +.ourproducts .product-item:nth-child(2) footer a { + background: #0073bf; +} +.ourproducts .product-item:nth-child(3) h3:after, +.ourproducts .product-item:nth-child(3) footer a { + background: #00a0a3; +} + +/* =========== EXTRA INFOS SECTION =========== */ +.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: 0.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; +} + +/* =========== FREE TRIALS SECTION =========== */ +.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; +} + +/* Colour formatting */ +.freetrials .product-item .title { + color: #FFF; +} +.freetrials .product-item h3:after, +.freetrials .product-item footer a { + background: #00a0a3; +} + +/* =========== NEWSLETTER SECTION =========== */ +.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: 0.9em; + background: #f2f3f7; + border: none; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; +} +.newsletter form button { + padding: 15px 25px; + font-size: 0.75em; + font-weight: 600; + color: #FFF; + background: #00a0a3; + border: none; + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + cursor: pointer; +} + +/* =========== FOOTER SECTION =========== */ +/* CONTACT LINKS */ +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: 0.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: #FFF; +} +footer .contact-info .social-links li { + margin: 0 10px; +} + +/* SITEMAP */ +footer .sitemap { + padding-top: 4rem; + padding-bottom: 4rem; + display: flex; + justify-content: space-between; + background: #1a171b; +} +footer .sitemap h4 { + color: #FFF; + font-size: 0.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: 0.75em; + font-weight: 600; + color: #808080; + text-transform: uppercase; } \ No newline at end of file diff --git a/img/EL-logo-dark.png b/img/EL-logo-dark.png new file mode 100644 index 0000000..3dd1ffc Binary files /dev/null and b/img/EL-logo-dark.png differ diff --git a/img/EL-logo.png b/img/EL-logo.png new file mode 100644 index 0000000..ce0f905 Binary files /dev/null and b/img/EL-logo.png differ diff --git a/img/form-filter.png b/img/form-filter.png new file mode 100644 index 0000000..7ec19a6 Binary files /dev/null and b/img/form-filter.png differ diff --git a/img/icons/cart.svg b/img/icons/cart.svg index bae55e6..e01605b 100644 --- a/img/icons/cart.svg +++ b/img/icons/cart.svg @@ -1,7 +1,7 @@ - - - + + + \ No newline at end of file diff --git a/img/icons/doublearrow.svg b/img/icons/doublearrow.svg index 8a05eef..2e8f8f5 100644 --- a/img/icons/doublearrow.svg +++ b/img/icons/doublearrow.svg @@ -1,10 +1,13 @@ - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/img/products/ordonnances-manu.png b/img/products/ordonnances-manu.png new file mode 100644 index 0000000..fab2741 Binary files /dev/null and b/img/products/ordonnances-manu.png differ diff --git a/img/products/solution_rh_paie.png b/img/products/solution_rh_paie.png index 38247d9..b977faf 100644 Binary files a/img/products/solution_rh_paie.png and b/img/products/solution_rh_paie.png differ diff --git a/index.html b/index.html index fc8817d..3699c84 100644 --- a/index.html +++ b/index.html @@ -21,30 +21,37 @@
+
+ +
-
+
- -

L'actualité juridique, convention collective à l'unité, droit social...

-

Nous avons des produits et services analysés mis à jour en permanence. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis et orci sit amet consequat.

- +

L'actualité juridique, convention collective à l'unité, droit social...

 +

Nous avons des produits et services analysés mis à jour en permanence. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis et orci sit amet consequat.

+ - - +
+ +
-
Nos produits pour :
- - - - - - - + +
+ + + + + + + +