From 96726341b834a8371b18bf1190f9d9520b91d077 Mon Sep 17 00:00:00 2001 From: AlexisNP <39308709+AlexisNP@users.noreply.github.com> Date: Thu, 22 Aug 2019 14:11:15 +0200 Subject: [PATCH] RELEASE 1.0 Finished the menu, mobile versions and animations. --- css/style.css | 145 ++++++++++++++++++++++++++++++++++++++++++++------ index.html | 62 +++++++++++++++------ js/app.js | 6 +++ 3 files changed, 180 insertions(+), 33 deletions(-) create mode 100644 js/app.js diff --git a/css/style.css b/css/style.css index 0569ecc..363e7be 100644 --- a/css/style.css +++ b/css/style.css @@ -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) { diff --git a/index.html b/index.html index 268da42..bb48808 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,9 @@ + + + @@ -25,11 +28,11 @@
+
+
01 89 78 63 12
+ Gratuit +
@@ -48,16 +75,19 @@
- +
+ + +
@@ -285,4 +315,4 @@ - \ No newline at end of file + diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..26cbff5 --- /dev/null +++ b/js/app.js @@ -0,0 +1,6 @@ +$(document).ready(() => { + // Toggles the menu + $('.menu-btn').click(() => { + $('.menu').toggleClass('active'); + }) +}) \ No newline at end of file