- Fixed some errors and typos (for label without an id assigned, leftover div tag, "\" instead of "/"). - Removed fontawesome dependency in favour of icomoon, a lightweight icon font-based library. - Thanks to Juan, made it so the menu uses only CSS, without the need to call for jquery and app.js. - Removed some useless CSS.
315 lines
12 KiB
HTML
315 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<!-- Meta -->
|
||
<title>Éditions Législatives</title>
|
||
<meta charset="utf-8" lang="fr" >
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="author" content="Alexis Pelé">
|
||
<meta name="keywords" content="éditions législatives, juridique, conventions collectives, solutions rh, rh, ressources humaines, ordonnances, macron, représentant personnel, comptables, immobilier">
|
||
<meta name="description" content="Éditions Législatives - L'actualité juridique, convention collective à l'unité, droit social… nous avons des produits et services analysés mis à jour en permanence.">
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="96x96" href="img/icons/favicon-96x96.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png">
|
||
<!-- Fonts -->
|
||
<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">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="landing">
|
||
<header>
|
||
<div>
|
||
<a href="#"><img src="img/EL-logo.png" class="logo" alt="éditions législatives logo"></a>
|
||
</div>
|
||
<div class="phone">
|
||
<address><a href="tel:0189786312">01 89 78 63 12</a></address>
|
||
<b class="free-tooltip">Gratuit</b>
|
||
</div>
|
||
<nav>
|
||
<div class="my-cart">
|
||
<a href="#">
|
||
<span class="icon-cart"></span>
|
||
<div class="cart-itemcounter">2</div>
|
||
</a>
|
||
</div>
|
||
<button type="button" class="login-btn">Connexion</button>
|
||
<div class="menu">
|
||
<input type="checkbox" hidden id="show-menu" />
|
||
<label class="menu-btn" for="show-menu">Menu</label>
|
||
<ul class="menu-body">
|
||
<li class="menu-item">
|
||
<a href="#" title="Accueil">
|
||
<span class="icon-home"></span>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="#" title="Boutique">
|
||
<span class="icon-credit-card"></span>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="#" title="Mon profil">
|
||
<span class="icon-user"></span>
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="#" title="Nous contacter">
|
||
<span class="icon-envelop"></span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
<div class="news-container">
|
||
<article>
|
||
<a href="#"><h1>L'actualité juridique, convention collective à l'unité, droit social...</h1></a>
|
||
<p>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.</p>
|
||
</article>
|
||
<form action="#">
|
||
<label for="q">Une recherche ?</label>
|
||
<input id="q" name="q" type="text" placeholder="Ex: Fiche de paie, loi Macron...">
|
||
<div class="select-wrapper">
|
||
<span class="icon-circle-down"></span>
|
||
<select name="domain">
|
||
<option value="void" disabled selected>Votre domaine</option>
|
||
<option value="rh">Ressources humaines</option>
|
||
<option value="staffrep">Représentant du personnel</option>
|
||
<option value="accountant">Expert comptable</option>
|
||
<option value="lawyers">Avocat et direction juridique</option>
|
||
<option value="HSE">HSE</option>
|
||
<option value="regions">Collectivités territoriales</option>
|
||
<option value="housing">Immobilier</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<button type="submit">Rechercher</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ourproducts">
|
||
<header>
|
||
<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 autres">Autres...</button>
|
||
</div>
|
||
</header>
|
||
<ul class="product-list">
|
||
|
||
<li class="product-item">
|
||
<div class="title">Solution métier</div>
|
||
<div class="product-card">
|
||
<header>
|
||
<img src="./img/products/solution_rh_paie.png" alt="solutions rh paie photo">
|
||
<b class="price">802,00 € <sup>HT</sup></b>
|
||
</header>
|
||
<h3>SOLUTIONS RH PAIE</h3>
|
||
<p>Le dispositif infaillible pour gérer la paie.</p>
|
||
<footer>
|
||
<a href="#">Tester gratuitement</a>
|
||
</footer>
|
||
</div>
|
||
</li>
|
||
<li class="product-item">
|
||
<div class="title">Ouvrage pratique</div>
|
||
<div class="product-card">
|
||
<header>
|
||
<img src="./img/products/ordonnances-manu.png" alt="ordonnance macron photo">
|
||
<b class="price">60,00 € <sup>TTC</sup></b>
|
||
</header>
|
||
<h3>ORDONNANCE MACRON</h3>
|
||
<p>La réforme du code du travail : Ce qui change !</p>
|
||
<footer>
|
||
<a href="#">
|
||
<span><span class="icon-cart"></span> Ajouter au panier</span>
|
||
</a>
|
||
</footer>
|
||
</div>
|
||
</li>
|
||
<li class="product-item">
|
||
<div class="title">Ressource gratuite</div>
|
||
<div class="product-card">
|
||
<header>
|
||
<img src="./img/products/brp-gerer-la-mobilite-en-entreprise.png" alt="solutions rh paie photo">
|
||
<b class="price">GRATUIT</b>
|
||
</header>
|
||
<h3>SOLUTIONS RH PAIE</h3>
|
||
<p>Une nouvelle articulation accords de branche/accords d’entreprise</p>
|
||
<footer>
|
||
<a href="#">Consulter gratuitement</a>
|
||
</footer>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<footer>
|
||
<a href="#">Tous nos produits pour <b>« Ressources humaines »</b></a>
|
||
</footer>
|
||
</div>
|
||
|
||
<div class="extra-infos">
|
||
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
|
||
<ul>
|
||
<li>
|
||
<span class="icon-loop2"></span>
|
||
<p>Satisfait ou remboursé pendant 2 semaines</p>
|
||
</li>
|
||
<li>
|
||
<span class="icon-trophy"></span>
|
||
<p>Qualité et mise à jour assurées par nos experts</p>
|
||
</li>
|
||
<li>
|
||
<span class="icon-bubbles"></span>
|
||
<p>Réponse gratuite à toutes vos questions sur l’utilisation de nos produits</p>
|
||
</li>
|
||
<li>
|
||
<span class="icon-lock"></span>
|
||
<p>Règlement par chèque, virement, ou CB sécurisé en ligne</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="freetrials">
|
||
<header>
|
||
<p>Découvrez gratuitement tous nos produits</p>
|
||
<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="ordonnance macron photo">
|
||
<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="baux commerciaux photo">
|
||
<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 class="newsletter">
|
||
<p>Suivez toute notre actualité en vous inscrivant à notre newsletter</p>
|
||
<form action="#">
|
||
<input type="email" placeholder="Votre adresse mail">
|
||
<button type="submit">S'inscrire</button>
|
||
</form>
|
||
</div>
|
||
|
||
<footer>
|
||
<div class="contact-info">
|
||
<div>
|
||
<a href="#"><img src="img/EL-logo-dark.png" class="logo" alt="éditions législatives logo"></a>
|
||
</div>
|
||
<div class="phone">
|
||
<p>Appelez-nous !</p>
|
||
<address><a href="tel:0189786312">01 89 78 63 12</a></address>
|
||
</div>
|
||
<ul class="social-links">
|
||
<li><a href="facebook.com"><span class="icon-facebook"></span></a></li>
|
||
<li><a href="twitter.com"><span class="icon-twitter"></span></a></li>
|
||
<li><a href="linkedin.com"><span class="icon-linkedin2"></span></a></li>
|
||
<li><a href="youtube.com"><span class="icon-youtube"></span></a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="sitemap">
|
||
<div>
|
||
<h4>NOS MÉTIERS</h4>
|
||
<ul>
|
||
<li><a href="#">Ressources humaines</a></li>
|
||
<li><a href="#">Représentant du personnel</a></li>
|
||
<li><a href="#">Experts-comptables</a></li>
|
||
<li><a href="#">Avocats et directions juridiques</a></li>
|
||
<li><a href="#">HSE</a></li>
|
||
<li><a href="#">Collectivités territoriales</a></li>
|
||
<li><a href="#">Immobilier</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4>NOS DOMAINES</h4>
|
||
<ul>
|
||
<li><a href="#">Ressources humaines</a></li>
|
||
<li><a href="#">Représentant du personnel</a></li>
|
||
<li><a href="#">Experts-comptables</a></li>
|
||
<li><a href="#">Avocats et directions juridiques</a></li>
|
||
<li><a href="#">HSE</a></li>
|
||
<li><a href="#">Collectivités territoriales</a></li>
|
||
<li><a href="#">Immobilier</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4>À PROPOS</h4>
|
||
<ul>
|
||
<li><a href="#">Ressources humaines</a></li>
|
||
<li><a href="#">Représentant du personnel</a></li>
|
||
<li><a href="#">Experts-comptables</a></li>
|
||
<li><a href="#">Avocats et directions juridiques</a></li>
|
||
<li><a href="#">HSE</a></li>
|
||
<li><a href="#">Collectivités territoriales</a></li>
|
||
<li><a href="#">Immobilier</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4>TOP RECHERCHE</h4>
|
||
<ul>
|
||
<li><a href="#">Ressources humaines</a></li>
|
||
<li><a href="#">Représentant du personnel</a></li>
|
||
<li><a href="#">Experts-comptables</a></li>
|
||
<li><a href="#">Avocats et directions juridiques</a></li>
|
||
<li><a href="#">HSE</a></li>
|
||
<li><a href="#">Collectivités territoriales</a></li>
|
||
<li><a href="#">Immobilier</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
</body>
|
||
</html>
|