diff --git a/css/style.css b/css/style.css index c1d82d6..0569ecc 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,8 @@ +/** CSS File for Éditions Législatives +* @website : Éditions Législatives +* @author : Alexis Pelé +*/ + /* 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; @@ -10,33 +15,41 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } +/* Removes the extra pixels for input, selects and textarea fields */ select, input, textarea { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } +/* Removes unordered list dots */ ul { list-style-type: none; } +/* Allows people to modify easily links' colours without targetting the a element */ a { color: inherit; text-decoration: none; } +/* Prevents the weird rectangle outline when a round button is toggled */ button:focus, -input:focus { +input:focus, +select:focus { outline: none; } /* === GENERAL RULES === */ -body { +body, +input, +textarea { font-family: 'Open Sans', serif; color: #111; } +/* Sets the padding for the whole page */ body > *:not(footer), .contact-info, .sitemap { - padding-right: 17%; - padding-left: 17%; + padding-right: 17.5%; + padding-left: 17.5%; } h1 { font-size: 1.3em; @@ -53,9 +66,6 @@ sup { vertical-align: super; font-size: 70%; } -input, textarea { - font-family: 'Open Sans', serif; -} /* =========== LANDING SECTION =========== */ @@ -109,19 +119,19 @@ input, textarea { 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%; - } +.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; @@ -159,11 +169,22 @@ input, textarea { border-bottom-left-radius: 25px; box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.2) } -/* NEWS */ + +/* News section */ .landing .news-container article { - width: 65%; + 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; @@ -182,10 +203,13 @@ input, textarea { background: #0073be; transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); } -/* FORM */ + +/* Search form section */ .landing .news-container form { - width: 35%; - padding: 4.5rem 2rem 0 2rem; + padding: 2rem; + display: flex; + flex-flow: column; + justify-content: center; background: url("../img/form-filter.png"); background-size: cover; background-repeat: no-repeat; @@ -199,6 +223,7 @@ input, textarea { .landing .news-container form select { display: block; width: 100%; + min-width: 300px; margin: 0.5rem 0; padding: 10px 14px; color: #a7a7a7; @@ -218,14 +243,16 @@ input, textarea { } /* =========== OUR PRODUCTS SECTION =========== */ +/* General */ .ourproducts { padding-top: 4rem; padding-bottom: 4rem; } -/* TAG HEADER */ +/* Products' tags header */ .ourproducts > header { display: flex; + justify-content: center; align-items: center; } .ourproducts > header label { @@ -236,33 +263,294 @@ input, textarea { margin: 0 1rem; } .ourproducts > header .btn-group button { - margin: 0 3px; + margin: 5px 3px 5px; padding: 10px 14px; font-size: 0.7em; font-weight: 600; - background: #f3f4f8; - border: none; + border: 1px solid transparent; 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); +} +/* Button effects */ +.ourproducts > header .btn-group button:not(.active) { + color: #777; + background: none; + 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; - 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 */ +/* Footer */ +.ourproducts > footer a { + background: #f1f2f6; +} + +/* Colour formatting */ +.ourproducts .product-item:nth-child(1) h3:after, +.ourproducts .product-item:nth-child(1) footer a:hover { + 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: none; + border: 1px solid #9b1f82; +} + +.ourproducts .product-item:nth-child(2) h3:after, +.ourproducts .product-item:nth-child(2) footer a:hover { + 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: none; + border: 1px solid #0073bf; +} + +.ourproducts .product-item:nth-child(3) h3:after, +.ourproducts .product-item:nth-child(3) footer a:hover { + 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: none; + border: 1px solid #00a0a3; +} + +/* =========== EXTRA INFOS SECTION =========== */ +/* General */ +.extra-infos { + background: #fbfbfb; +} +.extra-infos h2 { + padding-top: 4rem; + font-size: 1.2em; + font-weight: 600; + text-align: center; +} + +/* Info list */ +.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 =========== */ +/* General */ +.freetrials { + padding-top: 5rem; + padding-bottom: 5rem; + background-image: linear-gradient(to bottom, #00a0a3 40%, #f1f2f6 40%); +} + +/* Header */ +.freetrials > header { + font-size: 1.5em; + color: #FFF; + text-align: center; +} +.freetrials > header b { + color: #77eef0; +} + +/* Footer */ +.freetrials > footer a { + background: #FFF; +} + +/* Colour formatting */ +.freetrials .product-item .title { + color: #FFF; +} +.freetrials .product-item h3:after, +.freetrials .product-item footer a:hover { + background: #00a0a3; + color: #FFF; +} +.freetrials .product-item footer a:hover { + border: 1px solid transparent; +} +.freetrials .product-item footer a { + color: #00a0a3; + background: none; + border: 1px solid #00a0a3; +} + +/* =========== NEWSLETTER SECTION =========== */ +/* General */ +.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 field */ +.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; +} +.newsletter form button:hover { + background: #46cfd1; +} + +/* =========== FOOTER SECTION =========== */ +/* Top Footer - Contact Infos */ +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; +} +/* Top Footer - Phone number */ +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; +} +/* Top Footer - Social Links */ +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 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} + +/* Bottom Footer - 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; +} +footer .sitemap a:hover { + color: #FFF; +} + + +/* =========== COMPLEX LAYOUTS =========== */ +/* === DISPLAYING PRODUCT LISTS (.ourproducts / .freetrials ) === */ +/* List display */ .product-list { padding: 3rem 0; display: flex; - justify-content: space-between; + justify-content: center; + flex-flow: row wrap; } -/* SINGLE ITEMS */ +/* Items display */ .product-item { - width: 30%; - min-width: 250px; + 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: 0.75rem; @@ -313,7 +601,8 @@ input, textarea { color: #FFF; border-radius: 20px; } -/* FOOTER SECTION */ + +/* Sections' footer */ .ourproducts > footer, .freetrials > footer { display: flex; @@ -325,174 +614,193 @@ input, textarea { 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; -} +/* =========== MEDIA QUERIES =========== */ -/* =========== 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; +/* LAPTOPS */ +@media only screen +and (max-width : 1500px) { + /* Fixes the main padding */ + body > *:not(footer), + .contact-info, + .sitemap { + padding-right: 10%; + padding-left: 10%; } -footer .sitemap a { - font-size: 0.75em; - font-weight: 600; - color: #808080; - text-transform: uppercase; -} \ No newline at end of file + /* Landing Section */ + .landing .news-container article { + padding: 4rem 9rem 4rem 3rem; + } + .landing .news-container article:after { + top: 4rem; + } +} + +/* SMALL LAPTOPS */ +@media only screen +and (max-width : 1200px) { + /* Fixes the main padding */ + body > *:not(footer), + .contact-info, + .sitemap { + padding-right: 5%; + padding-left: 5%; + } + /* Landing Article */ + .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; + } +} + +/* TABLETS */ +@media only screen +and (max-width : 1060px) { + /* Fixes the main padding */ + body > *:not(footer), + .contact-info, + .sitemap { + padding-right: 2%; + padding-left: 2%; + } + .product-list { + justify-content: space-around; + } +} + +/* PHONES */ +@media only screen +and (max-width : 700px) { + /* Fixes the main padding */ + body > *:not(footer), + .contact-info, + .sitemap { + padding-right: 0; + padding-left: 0; + } + /* LANDING */ + /* Hiding irrelevant things */ + .landing nav .phone, + .landing nav .login-btn, + .landing .news-container form { + display: none; + } + .landing { + min-height: 100vh; + padding: 2.5rem 1rem; + } + .landing .news-container { + margin-top: 4rem; + } + .landing .news-container article { + padding: 1.5rem 3rem 2.5rem 2rem; + } + .landing .news-container article:after { + top: 0; + height: 100px; + width: 25px; + } + + /* OUR PRODUCTS */ + .ourproducts { + padding-top: 2rem; + padding-bottom: 2rem; + } + .ourproducts > header { + padding: 0 1rem; + } + + /* EXTRA INFOS */ + /* Don't display this */ + .extra-infos { + display: none; + } + + /* FREE TRIALS */ + .freetrials { + padding: 2rem 1rem; + background: #00a0a3; + } + .freetrials > header { + padding-bottom: 1rem; + } + + /* PRODUCTS LIST */ + .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: 0.9em; + } + .product-card { + margin-bottom: 1.5rem; + padding: 1rem 5vw 1.5rem; + border: none; + border-radius: 0; + } + .ourproducts > footer a, + .freetrials > footer a { + width: 60%; + text-align: center; + font-size: 0.8em; + padding: 8px 10px; + } + + /* NEWSLETTER */ + .newsletter { + padding: 2rem 1.5rem; + } + .newsletter form { + min-width: 60%; + } + + /* FOOTER */ + footer .contact-info { + display: block; + } + footer .phone { + display: none; + } + footer .contact-info .social-links { + margin-top: 0.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 : 1069px) +and (min-width : 700px) { + /* Hides the third item to preserve space */ + .product-item:nth-child(3) { + display: none; + } +} diff --git a/index.html b/index.html index 3699c84..268da42 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@ + @@ -31,13 +32,7 @@
- - - - - - - +
2
@@ -72,14 +67,14 @@
- +
+ -
@@ -110,7 +105,7 @@

La réforme du code du travail : Ce qui change !

@@ -163,50 +158,49 @@

SANS ENGAGEMENTS ET EN ACCES ILLIMITÉ PENDANT 15 JOURS.

+
  • +
    Dossier spécial
    +
    +
    + # + GRATUIT +
    +

    ORDONNANCE MACRON

    +

    Une nouvelle articulation accords de branche/accords d’entreprise

    + +
    +
    • +
  • +
    Top téléchargement
    +
    +
    + # + GRATUIT +
    +

    BAIL COMMERCIAL

    +

    Une nouvelle articulation accords de branche/accords d’entreprise

    + +
    +
    • +
  • +
    Article à la une
    +
    +

    "L'ACCORD SUR LA FORMATION PROFESSIONNELLE MANQUE D’AMBITION"

    +

    Marc Dennery, co-fondateur et co-dirigeant de C-Campus, regrette que le projet d'accord soumis à signature ne modifie pas en profondeur le système de la formation professionnelle. Loin des annonces de l'été 2017. Interview...

    + +
    +
    • + - +
    @@ -227,10 +221,10 @@
    01 89 78 63 12