From 5f245745f69a6aabaed358faf99da2c1e44bd042 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Sat, 24 Jun 2023 10:04:41 +0200
Subject: [PATCH] Added responsive tags for index.css

---
 css/index.css | 229 ++++++++++++++++++++++++++++++++++++--------------
 index.html    |   6 +-
 js/base.js    |   1 +
 3 files changed, 171 insertions(+), 65 deletions(-)

diff --git a/css/index.css b/css/index.css
index cdb0230..4292892 100644
--- a/css/index.css
+++ b/css/index.css
@@ -3,24 +3,172 @@
   opacity: 0;
 }
 
-.presentation {
-  overflow: hidden;
-  width: 100%;
-  height: 30rem;
-  display: flex;
-  background-image: url("../assets/cabinet-avocats-900x601.jpeg");
-  background-position-y: 100%;
-  background-size: cover;
-  position: relative;
+@media screen and (min-width: 700px) {
+  .presentation {
+    overflow: hidden;
+    width: 100%;
+    height: 30rem;
+    display: flex;
+    background-image: url("../assets/cabinet-avocats-900x601.jpeg");
+    background-position-y: 50%;
+    background-size: cover;
+    position: relative;
+  }
+
+  .presentation-text {
+    width: 100%;
+    margin: 1rem;
+    padding: 0 0 0 2rem;
+    z-index: 1;
+    font-size: larger;
+    color: var(--color-dark);
+    position: relative;
+    top: 45%;
+  }
+
+  .photosaoul {
+    max-width: inherit;
+    height: inherit;
+    float: right;
+    display: none;
+    margin-top: auto;
+  }
+
+  .description {
+    background-color: var(--color-main-light);
+    width: 100%;
+    height: auto;
+    display: flex;
+    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;
+    position: relative;
+  }
+
+  .description-text {
+    font-family: 'Josefin Sans', sans-serif;
+    color: black;
+    width: 100%;
+    margin: 2rem 2rem;
+    word-wrap: break-word;
+    text-align: justify;
+  }
+
+  .description-img {
+    width: 100%;
+    height: auto;
+    margin: 0 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .billboard {
+    max-width: 30rem;
+    height: auto;
+    float: right;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+  }
+
+  .profilepic {
+    max-width: 20rem;
+    height: auto;
+    margin: 1.5rem 0;
+    float: right;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+  }
+
+  .description-btn a{
+    margin: 1rem;
+    font-size: medium;
+    text-align: center;
+  }
 }
 
-.presentation-text {
-  width: 100%;
-  margin: 14rem 2rem;
-  padding: 0 0 0 2rem;
-  z-index: 1;
-  font-size: larger;
-  color: var(--color-dark);
+@media screen and (max-width: 700px) {
+  .presentation-text {
+    width: 100%;
+    padding: 0 0 0 2rem;
+    z-index: 1;
+    font-size: small;
+    color: var(--color-dark);
+    position: relative;
+    top: 45%;
+  }
+
+  .photosaoul {
+    max-width: inherit;
+    height: 50%;
+    float: right;
+    display: none;
+    margin-top: 15rem;
+  }
+
+}
+
+@media screen and (max-width: 1000px) {
+  .presentation {
+    overflow: hidden;
+    width: 100%;
+    height: 30rem;
+    display: flex;
+    background-image: url("../assets/cabinet-avocats-900x601.jpeg");
+    background-position-y: 100%;
+    background-size: cover;
+    position: relative;
+  }
+
+  .description {
+    background-color: var(--color-main-light);
+    width: 100%;
+    height: auto;
+    display: flex;
+    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;
+    position: relative;
+    flex-direction: column;
+    overflow: clip;
+  }
+
+  .description-text {
+    font-family: 'Josefin Sans', sans-serif;
+    color: black;
+    width: 100%;
+    margin: 2rem 2rem;
+    padding-right: 4rem;
+    word-wrap: break-word;
+    text-align: justify;
+  }
+
+  .description-img {
+    width: 100%;
+    height: auto;
+    margin: 0 2rem;
+    padding-right: 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .billboard {
+    max-width: 20rem;
+    height: auto;
+    float: right;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+    padding-bottom: 2rem;
+  }
+
+  .profilepic {
+    max-width: 15rem;
+    height: auto;
+    margin: 1.5rem 0;
+    float: right;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+  }
+
+  .description-btn a{
+    margin: 1rem;
+    font-size: small;
+    text-align: center;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  }
 }
 
 .presentation-img {
@@ -29,14 +177,6 @@
   z-index: 10;
 }
 
-.photosaoul {
-  max-width: inherit;
-  height: inherit;
-  float: right;
-  display: none;
-  margin-top: auto;
-}
-
 .whiteband {
   background-color: rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(16px);
@@ -45,48 +185,11 @@
   position: absolute;
 }
 
-.description {
-  background-color: var(--color-main-light);
-  width: 100%;
-  height: auto;
-  display: flex;
-  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;
-  position: relative;
-}
-
-.description-text {
-  font-family: 'Josefin Sans', sans-serif;
-  color: black;
-  width: 100%;
-  margin: 2rem 2rem;
-  word-wrap: break-word;
-  overflow: clip;
-  text-align: justify;
-}
-
 .description-text em {
   color: var(--color-dark);
 }
 
-.description-img {
-  width: 100%;
-  height: auto;
-  margin: 0 2rem;
+.description-btn {
   display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.billboard {
-  max-width: 30rem;
-  height: auto;
-  float: right;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
-}
-
-.profilepic {
-  max-width: 25rem;
-  height: auto;
-  float: right;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+  flex-direction: row;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index defc8a7..72c057f 100644
--- a/index.html
+++ b/index.html
@@ -73,8 +73,10 @@
                 justice !
             </p>
             <br>
-            <a class="btn"href="avocat">En savoir plus</a>
-            <a class="btn" href="join/contact.html">Me contacter</a>
+            <div class="description-btn">
+                <a class="btn" href="avocat">En savoir plus</a>
+                <a class="btn" href="join/contact.html">Me contacter</a>
+            </div>
         </div>
     </div>
     <Footer></Footer>
diff --git a/js/base.js b/js/base.js
index fc38697..dcd450b 100644
--- a/js/base.js
+++ b/js/base.js
@@ -113,6 +113,7 @@ function popUpPlacement(className) {
 /****************************************/
 
 //Loading the html,js and css of navbar and footer
+//During the loading process we need a loading status bar
 var headTag = document.getElementsByTagName("head")[0];
 window.addEventListener('load', function () {
     loadCSS(urlStr + "css/base.css", headTag);