Added popup. Buttons for second description div. Added showPopUp, closePopUp and popUpPlacement

components/footer.html

@@ -1,4 +1,9 @@
 <div id="footer">
+    <div class="black-bg">
+        <div class="legal">
+            <a class="btn" href='javascript:closePopUp("black-bg")'>x</a>
+        </div>
+    </div>
     <div class="footer-container">
         <div class="footer-container_grid">
             <h1>Suivez-moi</h1>
@@ -16,7 +21,7 @@
             <p>Copyright © Yohan Boujon 2023</p>
         </div>
         <div class="footer-bottom_grid right-align">
-            <p><a href="#0">Mentions légales</a></p>
+            <p><a href='javascript:showPopUp("black-bg")'>Mentions légales</a></p>
         </div>
     </div>
 </div>

css/base.css

@@ -39,3 +39,44 @@ p {
 .left-align {
     text-align: left;
 }
+
+.btn {
+    border-radius: .25rem;
+    color: black;
+    background-color: var(--color-white);
+    font-weight: 800;
+    padding: 1rem 1rem;
+    text-decoration: none;
+    text-transform: uppercase;
+    display: inline-block;
+    transition: all .3s ease 0s;
+}
+
+.btn:hover{
+    transform: translateY(-3px);
+    background-color: var(--color-light);
+    color: var(--color-white);
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+}
+
+.black-bg{
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    background-color: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(4px);
+    z-index: 99;
+    display: none;
+}
+
+.legal{
+    border-radius: .5rem;
+    height: 80%;
+    width: 50%;
+    position: relative;
+    top: 10%;
+    left: 25%;
+    background-color: var(--color-white);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+    z-index: 100;
+}

index.html

@@ -49,7 +49,7 @@
             <img class="billboard" src="assets/meilleurappelersaoul.jpg"></img>
         </div>
     </div>
-    <div class="description">
+    <div class="description votre-avocat">
         <div class="description-img">
             <img class="profilepic" src="assets/saoult_bg_arbre.jpg"></img>
         </div>
@@ -71,8 +71,10 @@
                 pays qu’est la France aucune licorne ne peut faire ces délits. Les entités dictant ces mauvais mots à
                 votre égard ont sûrement tort, et je vais me battre avec vous pour leur prouver quelle est la vraie
                 justice !
-
             </p>
+            <br>
+            <a class="btn"href="avocat">En savoir plus</a>
+            <a class="btn" href="join/contact.html">Me contacter</a>
         </div>
     </div>
     <Footer></Footer>

js/base.js

@@ -2,7 +2,7 @@
 /*           global variables           */
 /****************************************/
 //Getting the complete URL and slice it by [0] to the directory URL, return the domain name.
-var urlStr = window.location.toString().slice(0,window.location.toString().lastIndexOf(window.location.pathname)+1);
+var urlStr = window.location.toString().slice(0, window.location.toString().lastIndexOf(window.location.pathname) + 1);
 //Getting the dir name by gathering the pathname and substract it with the last '/'.
 var dirStr = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/'));
 
@@ -20,7 +20,7 @@ function load(urlHTML, elementHTML, urlJS, elementJS) {
     })
         .catch(
             function (err) {
-                console.warn('Could not load '+urlHTML+': Add the correct tag ?', err);
+                console.warn('Could not load ' + urlHTML + ': Add the correct tag ?', err);
             }
         );
 }
@@ -32,7 +32,7 @@ function loadHTML(url, element) {
         element.innerHTML = htmltext;
     }).catch(
         function (err) {
-            console.warn('Could not load '+url+': Add the correct tag ?', err);
+            console.warn('Could not load ' + url + ': Add the correct tag ?', err);
         }
     );
 }
@@ -82,24 +82,46 @@ function getSlashNum(string) {
  * @param {Concat String} basePath 
  * @returns the concatened string
  */
-function concatPath(slashNum, basePath)
+function concatPath(slashNum, basePath) {
-{
     var slashString = "";
     for (let i = 0; i < slashNum; i++) {
         slashString += "../";
     }
-    return slashString+basePath;
+    return slashString + basePath;
+}
+
+function showPopUp(className) {
+    document.getElementsByClassName(className)[0].style.display = "block";
+    document.getElementsByTagName("body")[0].style.height = "100%";
+    document.getElementsByTagName("body")[0].style.overflow = "hidden";
+}
+
+function closePopUp(className) {
+    document.getElementsByClassName(className)[0].style.display = "none";
+    document.getElementsByTagName("body")[0].style.height = "";
+    document.getElementsByTagName("body")[0].style.overflow = "";
+}
+
+function popUpPlacement(className) {
+    var popup = document.getElementsByClassName(className)[0];
+    var body = document.getElementsByTagName("body")[0];
+    body.insertBefore(popup, body.firstChild)
 }
 
 /****************************************/
 /*                 main                 */
 /****************************************/
 
+//Loading the html,js and css of navbar and footer
 var headTag = document.getElementsByTagName("head")[0];
 window.addEventListener('load', function () {
-    loadCSS(urlStr+"css/base.css", headTag);
+    loadCSS(urlStr + "css/base.css", headTag);
-    loadCSS(urlStr+"css/navbar.css", headTag);
+    loadCSS(urlStr + "css/navbar.css", headTag);
-    load(urlStr+"components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr+"js/navbar.js", headTag);
+    load(urlStr + "components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr + "js/navbar.js", headTag);
-    loadCSS(urlStr+"css/footer.css", headTag);
+    loadCSS(urlStr + "css/footer.css", headTag);
-    load(urlStr+"components/footer.html", document.getElementsByTagName("Footer")[0], urlStr+"js/footer.js", headTag);
+    load(urlStr + "components/footer.html", document.getElementsByTagName("Footer")[0], urlStr + "js/footer.js", headTag)
+    setTimeout(() => {
+        //Will change
+        popUpPlacement("black-bg");
+    }, 200);
 })