This repository has been archived on 2026-06-29. You can view files and clone it. You cannot open issues or pull requests or push a commit.
Files
sample-el/index.html
AlexisNP ed2c30ec8a RELEASE 1.12
- 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.
2019-08-25 20:01:24 +02:00

315 lines
12 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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 dentreprise</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 lutilisation 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 dentreprise</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 dentreprise</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 DAMBITION"</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>