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

RELEASE 1.0

Browse Source 
Finished the menu, mobile versions and animations.
This commit is contained in:
AlexisNP
2019-08-22 14:11:15 +02:00
committed by GitHub
parent aa2e057741
commit 96726341b8
3 changed files with 180 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
css/style.css
View File

@@ -62,6 +62,7 @@ p {
b {
font-weight: 600;
}
/* Superscript */
sup {
vertical-align: super;
font-size: 70%;
@@ -95,15 +96,15 @@ sup {
margin-left: 2.5rem;
}
/* Phone Number */
.landing nav .phone {
.landing .phone {
display: flex;
align-items: center;
}
.landing nav .phone address {
.landing .phone address {
font-size: 0.95em;
font-weight: 600;
}
.landing nav .phone .free-tooltip {
.landing .phone .free-tooltip {
margin-left: 10px;
padding: 2px 5px;
font-size: 0.75em;
@@ -135,6 +136,8 @@ sup {
/* Log in button */
.landing nav .login-btn {
padding: 10px 25px;
font-size: 0.75em;
font-weight: 600;
color: #111;
background: #FFF;
border-radius: 25px;
@@ -147,19 +150,70 @@ sup {
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);
}
/* == MENU FORMATTING == */
/* Menu button */
.landing nav .menu {
position: relative;
color: #FFF;
border-radius: 50%;
}
.landing nav .menu-btn {
width: 40px;
height: 40px;
width: 50px;
height: 50px;
font-size: 0.65em;
font-weight: 600;
color: #FFF;
background: #000;
color: #000;
background: #FFF;
border: none;
border-radius: 25px;
border-radius: 50%;
cursor: pointer;
}
.landing nav .menu.active .menu-btn,
.landing nav .menu .menu-btn:hover {
color: #FFF;
background: #000;
}
/* Transformation effects */
.landing nav .menu:not(.active) .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%);
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}
.landing nav .menu .menu-body {
position: absolute;
right: 0;
margin-top: 10px;
display: flex;
text-align: center;
}
.landing nav .menu .menu-body .menu-item a {
width: 40px;
height: 40px;
position: relative;
margin-right: 15px;
display: block;
line-height: 40px;
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}
/* MAIN SECTION (NEWS + FORM) */
.landing .news-container {
@@ -226,10 +280,35 @@ sup {
min-width: 300px;
margin: 0.5rem 0;
padding: 10px 14px;
color: #a7a7a7;
color: #555;
background: #FFF;
border: solid 1px rgba(0, 0, 0, 0.1);
border-radius: 16px;
}
.landing .news-container form .select-wrapper {
position: relative;
}
.landing .news-container form select {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
.landing .news-container form .select-wrapper svg {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: #555;
z-index: 100;
}
.landing .news-container form select[disabled] {
color: red !important;
}
.landing .news-container form select svg {
position: absolute;
}
.landing .news-container form button {
width: 100%;
margin-top: 0.5rem;
@@ -448,7 +527,7 @@ sup {
cursor: pointer;
}
.newsletter form button:hover {
background: #46cfd1;
background: #32a44d;
}
/* =========== FOOTER SECTION =========== */
@@ -614,6 +693,11 @@ footer .sitemap a:hover {
padding: 10px 20px;
border-radius: 20px;
}
.ourproducts > footer a:hover,
.freetrials > footer a:hover {
color: #FFF;
background: #111;
}
/* =========== MEDIA QUERIES =========== */
@@ -682,7 +766,7 @@ and (max-width : 1060px) {
/* PHONES */
@media only screen
and (max-width : 700px) {
and (max-width : 750px) {
/* Fixes the main padding */
body > *:not(footer),
.contact-info,
@@ -692,20 +776,20 @@ and (max-width : 700px) {
}
/* LANDING */
/* Hiding irrelevant things */
.landing nav .phone,
.landing .phone,
.landing nav .login-btn,
.landing .news-container form {
display: none;
}
.landing {
min-height: 100vh;
padding: 2.5rem 1rem;
padding: 2.5rem;
}
.landing .news-container {
margin-top: 4rem;
}
.landing .news-container article {
padding: 1.5rem 3rem 2.5rem 2rem;
padding: 3rem 4rem;
}
.landing .news-container article:after {
top: 0;
@@ -730,7 +814,7 @@ and (max-width : 700px) {
/* FREE TRIALS */
.freetrials {
padding: 2rem 1rem;
padding: 2rem;
background: #00a0a3;
}
.freetrials > header {
@@ -755,9 +839,13 @@ and (max-width : 700px) {
}
.product-card {
margin-bottom: 1.5rem;
padding: 1rem 5vw 1.5rem;
padding: 1.5rem 12vw;
border: none;
border-radius: 0;
border-bottom-left-radius: 0;
}
.freetrials .product-card {
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
}
.ourproducts > footer a,
.freetrials > footer a {
@@ -796,6 +884,29 @@ and (max-width : 700px) {
}
}
/* SM PHONES */
@media only screen
and (max-width : 420px) {
.my-cart {
display: none;
}
.landing .news-container article {
padding: 2rem 2.5rem;
}
.ourproducts > footer a, .freetrials > footer a {
width: 90%;
}
.newsletter,
footer .sitemap {
padding: 2rem 0.5rem;
}
.newsletter form input,
.newsletter form button {
padding: 15px;
}
}
@media only screen
and (max-width : 1069px)
and (min-width : 700px) {

62
index.html
View File

@@ -17,6 +17,9 @@
<!-- 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>
@@ -25,11 +28,11 @@
<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="phone">
<address><a href="tel:0189786312">01 89 78 63 12</a></address>
<b class="free-tooltip">Gratuit</b>
</div>
<div class="my-cart">
<a href="#">
<i class="fas fa-shopping-cart fa-2x"></i>
@@ -37,7 +40,31 @@
</a>
</div>
<button type="button" class="login-btn">Connexion</button>
<button type="button" class="menu-btn">Menu</button>
<div class="menu">
<button type="button" class="menu-btn">Menu</button>
<ul class="menu-body">
<li class="menu-item">
<a href="#" title="Accueil">
<i class="fas fa-home"></i>
</a>
</li>
<li class="menu-item">
<a href="#" title="Boutique">
<i class="fas fa-shopping-bag"></i>
</a>
</li>
<li class="menu-item">
<a href="#" title="Mon profil">
<i class="fas fa-user"></i>
</a>
</li>
<li class="menu-item">
<a href="#" title="Nous contacter">
<i class="fas fa-paper-plane"></i>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="news-container">
@@ -48,16 +75,19 @@
<form action="#">
<label for="q">Une recherche ?</label>
<input name="q" type="text" placeholder="Ex: Fiche de paie, loi Macron...">
<select name="domain">
<option value="" disabled selected>Votre domaine</option>
<option value="">Ressources humaines</option>
<option value="">Représentant du personnel</option>
<option value="">Expert comptable</option>
<option value="">Avocat et direction juridique</option>
<option value="">Ressources humaines</option>
<option value="">Ressources humaines</option>
<option value="">Ressources humaines</option>
</select>
<div class="select-wrapper">
<i class="fas fa-sort-down"></i>
<select name="domain" aria-placeholder="Votre Domaine">
<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>
@@ -285,4 +315,4 @@
</body>
</html>
</html>

6
js/app.js Normal file
View File

@@ -0,0 +1,6 @@
$(document).ready(() => {
// Toggles the menu
$('.menu-btn').click(() => {
$('.menu').toggleClass('active');
})
})