Joururi/sample-el
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BETA-1.1

Browse Source 
Finished responsive CSS.
Merged and optimized existing CSS styles.
This commit is contained in:
AlexisNP
2019-08-21 16:48:22 +02:00
committed by GitHub
parent ec61d7901e
commit 8b955f69c4
2 changed files with 562 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

718
css/style.css
View File

@@ -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;
}
/* 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;
}
}

104
index.html
View File

@@ -16,6 +16,7 @@
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="https://kit.fontawesome.com/fc86bb0b54.js"></script>
</head>
<body>
@@ -31,13 +32,7 @@
</div>
<div class="my-cart">
<a href="#">
<svg style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;" viewBox="0 0 382 467.5" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd">
<g>
<path class="fil0" d="M11 0l59 14c4,0 6,3 7,6l9 44 289 27c5,1 9,6 7,11l-45 138c-1,4 -4,6 -8,6l-205 0 4 21 198 0c11,0 11,20 0,20l-207 0c-4,0 -8,-2 -9,-7l-51 -248 -52 -12c-12,-3 -7,-22 4,-20zm79 84l29 142 202 0 38 -116 -269 -26z"/>
<path class="fil0" d="M163 296c21,0 39,18 39,39 0,22 -18,39 -39,39 -21,0 -39,-17 -39,-39 0,-21 18,-39 39,-39zm0 20c-10,0 -19,9 -19,19 0,11 8,19 19,19 10,0 19,-8 19,-19 0,-10 -9,-19 -19,-19z"/>
<path class="fil0" d="M284 296c21,0 39,18 39,39 0,22 -18,39 -39,39 -21,0 -39,-17 -39,-39 0,-21 18,-39 39,-39zm0 20c-10,0 -19,9 -19,19 0,11 9,19 19,19 10,0 19,-8 19,-19 0,-10 -9,-19 -19,-19z"/>
</g>
</svg>
<i class="fas fa-shopping-cart fa-2x"></i>
<div class="cart-itemcounter">2</div>
</a>
</div>
@@ -72,14 +67,14 @@
<div class="ourproducts">
<header>
<label>Nos produits pour :</label>
<label>Nos produits pour:</label>
<div class="btn-group">
<button type="button" class="product-tag rh active">Ressources humaines</button>
<button type="button" class="product-tag compta">Comptabilité</button>
<button type="button" class="product-tag droit">Droit</button>
<button type="button" class="product-tag acl">Administrations & collectivités locales</button>
<button type="button" class="product-tag hse">HSE</button>
<button type="button" class="product-tag irp">IRP</button>
<button type="button" class="product-tag acl">Administrations & collectivités locales</button>
<button type="button" class="product-tag autres">Autres...</button>
</div>
</header>
@@ -110,7 +105,7 @@
<p>La réforme du code du travail : Ce qui change !</p>
<footer>
<a href="#">
<span>Ajouter au panier</span>
<span><i class="fas fa-shopping-cart"></i> Ajouter au panier</span>
</a>
</footer>
</div>
@@ -163,50 +158,49 @@
<p><b>SANS ENGAGEMENTS ET EN ACCES ILLIMITÉ PENDANT 15 JOURS.</b></p>
</header>
<ul class="product-list">
<li class="product-item">
<div class="title">Dossier spécial</div>
<div class="product-card">
<header>
<img src="./img/products/brp-gerer-la-mobilite-en-entreprise.png" alt="#">
<b class="price">GRATUIT</b>
</header>
<h3>ORDONNANCE MACRON</h3>
<p>Une nouvelle articulation accords de branche/accords d’entreprise</p>
<footer>
<a href="#">Consulter gratuitement</a>
</footer>
</div>
</li>
<li class="product-item">
<div class="title">Top téléchargement</div>
<div class="product-card">
<header>
<img src="./img/products/baux_commerciaux.png" alt="#">
<b class="price">GRATUIT</b>
</header>
<h3>BAIL COMMERCIAL</h3>
<p>Une nouvelle articulation accords de branche/accords d’entreprise</p>
<footer>
<a href="#">Consulter gratuitement</a>
</footer>
</div>
</li>
<li class="product-item">
<div class="title">Article à la une</div>
<div class="product-card">
<h3>"L'ACCORD SUR LA FORMATION PROFESSIONNELLE MANQUE D’AMBITION"</h3>
<p>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...</p>
<footer>
<a href="#">Consulter gratuitement</a>
</footer>
</div>
</li>
</ul>
<li class="product-item">
<div class="title">Dossier spécial</div>
<div class="product-card">
<header>
<img src="./img/products/brp-gerer-la-mobilite-en-entreprise.png" alt="#">
<b class="price">GRATUIT</b>
</header>
<h3>ORDONNANCE MACRON</h3>
<p>Une nouvelle articulation accords de branche/accords d’entreprise</p>
<footer>
<a href="#">Consulter gratuitement</a>
</footer>
</div>
</li>
<li class="product-item">
<div class="title">Top téléchargement</div>
<div class="product-card">
<header>
<img src="./img/products/baux_commerciaux.png" alt="#">
<b class="price">GRATUIT</b>
</header>
<h3>BAIL COMMERCIAL</h3>
<p>Une nouvelle articulation accords de branche/accords d’entreprise</p>
<footer>
<a href="#">Consulter gratuitement</a>
</footer>
</div>
</li>
<li class="product-item">
<div class="title">Article à la une</div>
<div class="product-card">
<h3>"L'ACCORD SUR LA FORMATION PROFESSIONNELLE MANQUE D’AMBITION"</h3>
<p>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...</p>
<footer>
<a href="#">Consulter gratuitement</a>
</footer>
</div>
</li>
</ul>
<footer>
<a href="#">Toutes nos ressources à consulter <b>gratuitement</b></a>
</footer>
</div>
</div>
</div>
<div class="newsletter">
@@ -227,10 +221,10 @@
<address><a href="tel:0189786312">01 89 78 63 12</a></address>
</div>
<ul class="social-links">
<li><a href="facebook.com">F</a></li>
<li><a href="twitter.com">T</a></li>
<li><a href="linkedin.com">L</a></li>
<li><a href="youtube.com">Y</a></li>
<li><a href="facebook.com"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="twitter.com"><i class="fab fa-twitter"></i></a></li>
<li><a href="linkedin.com"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="youtube.com"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
<div class="sitemap">