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.
This commit is contained in:
AlexisNP
2
css/style-min.css
vendored
2
css/style-min.css
vendored
File diff suppressed because one or more lines are too long
144
css/style.css
144
css/style.css
@@ -116,8 +116,8 @@ sup {
|
||||
.landing nav .my-cart a{
|
||||
position: relative;
|
||||
}
|
||||
.landing nav .my-cart svg{
|
||||
width: 25px;
|
||||
.landing nav .my-cart span{
|
||||
font-size: 1.35em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.landing nav .my-cart .cart-itemcounter {
|
||||
@@ -151,6 +151,7 @@ sup {
|
||||
|
||||
/* == MENU FORMATTING == */
|
||||
/* Menu button */
|
||||
/* update by Juan */
|
||||
.landing nav .menu {
|
||||
position: relative;
|
||||
color: #FFF;
|
||||
@@ -167,25 +168,32 @@ sup {
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.landing nav .menu.active .menu-btn,
|
||||
#show-menu:checked ~ .menu-btn,
|
||||
.landing nav .menu .menu-btn:hover {
|
||||
color: #FFF;
|
||||
background: #000;
|
||||
}
|
||||
/* Transformation effects */
|
||||
.landing nav .menu:not(.active) .menu-item a{
|
||||
/* style depends on show menu being checked rather than active, this replaces js */
|
||||
#show-menu ~ .menu-body .menu-item a
|
||||
{
|
||||
transform: scale(0);
|
||||
transform-origin: 20px 20px;
|
||||
transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
|
||||
}
|
||||
.landing nav .menu.active .menu-item a{
|
||||
transform: scale(100%);
|
||||
#show-menu:checked ~ .menu-body
|
||||
{
|
||||
display: flex;
|
||||
}
|
||||
#show-menu:checked ~ .menu-body .menu-item a
|
||||
{
|
||||
transform: scale(1);
|
||||
transform-origin: 20px 20px;
|
||||
transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
|
||||
}
|
||||
.landing nav .menu.active .menu-item:nth-child(1) a {transition-delay: 0.3s}
|
||||
.landing nav .menu.active .menu-item:nth-child(2) a {transition-delay: 0.2s}
|
||||
.landing nav .menu.active .menu-item:nth-child(3) a {transition-delay: 0.1s}
|
||||
|
||||
#show-menu:checked ~ .menu-body .menu-item:nth-child(1) a {transition-delay: 0.3s}
|
||||
#show-menu:checked ~ .menu-body .menu-item:nth-child(2) a {transition-delay: 0.2s}
|
||||
#show-menu:checked ~ .menu-body .menu-item:nth-child(3) a {transition-delay: 0.1s}
|
||||
|
||||
.landing nav .menu .menu-body {
|
||||
position: absolute;
|
||||
@@ -204,11 +212,21 @@ sup {
|
||||
background: #000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* Colour formatting */
|
||||
.landing nav .menu.active .menu-body .menu-item:nth-child(1) a:hover {background: #00a0a3}
|
||||
.landing nav .menu.active .menu-body .menu-item:nth-child(2) a:hover {background: #9b1f82}
|
||||
.landing nav .menu.active .menu-body .menu-item:nth-child(3) a:hover {background: #ed0959}
|
||||
.landing nav .menu.active .menu-body .menu-item:nth-child(4) a:hover {background: #0073be}
|
||||
/* Colour formatting no need to depend on active */
|
||||
.landing nav .menu .menu-body .menu-item:nth-child(1) a:hover {background: #00a0a3}
|
||||
.landing nav .menu .menu-body .menu-item:nth-child(2) a:hover {background: #9b1f82}
|
||||
.landing nav .menu .menu-body .menu-item:nth-child(3) a:hover {background: #ed0959}
|
||||
.landing nav .menu .menu-body .menu-item:nth-child(4) a:hover {background: #0073be}
|
||||
|
||||
/* extra css so label behaves like a button */
|
||||
label.menu-btn
|
||||
{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* MAIN SECTION (NEWS + FORM) */
|
||||
.landing .news-container {
|
||||
@@ -299,16 +317,14 @@ sup {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.landing .news-container form .select-wrapper svg {
|
||||
.landing .news-container form .select-wrapper span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
color: #555;
|
||||
z-index: 100;
|
||||
}
|
||||
.landing .news-container form select svg {
|
||||
position: absolute;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.landing .news-container form button {
|
||||
width: 100%;
|
||||
@@ -443,10 +459,11 @@ sup {
|
||||
.extra-infos li:not(:last-child) {
|
||||
border-right: solid 1px #E0E0E0;
|
||||
}
|
||||
.extra-infos li img {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
margin-bottom: .5rem;
|
||||
.extra-infos li span {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
.extra-infos li p {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* =========== FREE TRIALS SECTION =========== */
|
||||
@@ -716,6 +733,80 @@ footer .sitemap a:hover {
|
||||
background: #111;
|
||||
}
|
||||
|
||||
/* =========== FONTS =========== */
|
||||
/* icomoon icons */
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?nab70s');
|
||||
src: url('fonts/icomoon.eot?nab70s#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?nab70s') format('truetype'),
|
||||
url('fonts/icomoon.woff?nab70s') format('woff'),
|
||||
url('fonts/icomoon.svg?nab70s#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-home:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-cart:before {
|
||||
content: "\e93a";
|
||||
}
|
||||
.icon-credit-card:before {
|
||||
content: "\e93f";
|
||||
}
|
||||
.icon-envelop:before {
|
||||
content: "\e945";
|
||||
}
|
||||
.icon-bubbles:before {
|
||||
content: "\e96c";
|
||||
}
|
||||
.icon-user:before {
|
||||
content: "\e971";
|
||||
}
|
||||
.icon-lock:before {
|
||||
content: "\e98f";
|
||||
}
|
||||
.icon-trophy:before {
|
||||
content: "\e99e";
|
||||
}
|
||||
.icon-loop2:before {
|
||||
content: "\ea2e";
|
||||
}
|
||||
.icon-circle-down:before {
|
||||
content: "\ea43";
|
||||
}
|
||||
.icon-facebook:before {
|
||||
content: "\ea90";
|
||||
}
|
||||
.icon-twitter:before {
|
||||
content: "\ea96";
|
||||
}
|
||||
.icon-youtube:before {
|
||||
content: "\ea9d";
|
||||
}
|
||||
.icon-linkedin2:before {
|
||||
content: "\eaca";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* =========== MEDIA QUERIES =========== */
|
||||
|
||||
/* LAPTOPS */
|
||||
@@ -779,6 +870,9 @@ and (max-width : 1060px) {
|
||||
.product-list {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.extra-infos li {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* PHONES */
|
||||
|
||||
44
index.html
44
index.html
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<!-- Meta -->
|
||||
<title>Éditions Législatives</title>
|
||||
@@ -16,10 +16,6 @@
|
||||
<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>
|
||||
<!-- jQuery -->
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||
<script src="./js/app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -35,32 +31,33 @@
|
||||
<nav>
|
||||
<div class="my-cart">
|
||||
<a href="#">
|
||||
<i class="fas fa-shopping-cart fa-2x"></i>
|
||||
<span class="icon-cart"></span>
|
||||
<div class="cart-itemcounter">2</div>
|
||||
</a>
|
||||
</div>
|
||||
<button type="button" class="login-btn">Connexion</button>
|
||||
<div class="menu">
|
||||
<button type="button" class="menu-btn">Menu</button>
|
||||
<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">
|
||||
<i class="fas fa-home"></i>
|
||||
<span class="icon-home"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#" title="Boutique">
|
||||
<i class="fas fa-shopping-bag"></i>
|
||||
<span class="icon-credit-card"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#" title="Mon profil">
|
||||
<i class="fas fa-user"></i>
|
||||
<span class="icon-user"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#" title="Nous contacter">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
<span class="icon-envelop"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -74,10 +71,10 @@
|
||||
</article>
|
||||
<form action="#">
|
||||
<label for="q">Une recherche ?</label>
|
||||
<input name="q" type="text" placeholder="Ex: Fiche de paie, loi Macron...">
|
||||
<input id="q" name="q" type="text" placeholder="Ex: Fiche de paie, loi Macron...">
|
||||
<div class="select-wrapper">
|
||||
<i class="fas fa-sort-down"></i>
|
||||
<select name="domain" aria-placeholder="Votre Domaine">
|
||||
<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>
|
||||
@@ -135,7 +132,7 @@
|
||||
<p>La réforme du code du travail : Ce qui change !</p>
|
||||
<footer>
|
||||
<a href="#">
|
||||
<span><i class="fas fa-shopping-cart"></i> Ajouter au panier</span>
|
||||
<span><span class="icon-cart"></span> Ajouter au panier</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -164,19 +161,19 @@
|
||||
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<img src="img\icons\doublearrow.svg" alt="satisfait ou remboursé icone">
|
||||
<span class="icon-loop2"></span>
|
||||
<p>Satisfait ou remboursé pendant 2 semaines</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="img\icons\medal.svg" alt="qualité et mise à jour icone">
|
||||
<span class="icon-trophy"></span>
|
||||
<p>Qualité et mise à jour assurées par nos experts</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="img\icons\speechbubble.svg" alt="réponse gratuite icone">
|
||||
<span class="icon-bubbles"></span>
|
||||
<p>Réponse gratuite à toutes vos questions sur l’utilisation de nos produits</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="img\icons\lock.svg" alt="sécurité de paiement icone">
|
||||
<span class="icon-lock"></span>
|
||||
<p>Règlement par chèque, virement, ou CB sécurisé en ligne</p>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -230,7 +227,6 @@
|
||||
<footer>
|
||||
<a href="#">Toutes nos ressources à consulter <b>gratuitement</b></a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="newsletter">
|
||||
@@ -251,10 +247,10 @@
|
||||
<address><a href="tel:0189786312">01 89 78 63 12</a></address>
|
||||
</div>
|
||||
<ul class="social-links">
|
||||
<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>
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user