fix bug css

RecyLife · Oct 13, 2024 · 2ef07a6 · 2ef07a6
1 parent 3b2cf3a
commit 2ef07a6
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -46,9 +46,11 @@
 
     <!--Website datas / loads-->
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <title>RecyTech</title>
     <link rel="icon" href="images/logo.png" type="image/png">
+    <link rel="icon" type="image/svg+xml" href="images/logo.svg">
+    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="./styles/styles.css">
     <link rel="stylesheet" href="./styles/header.css">
@@ -132,37 +134,39 @@ <h2 class="about-title">À propos</h2>
         </section>
 
         <section id="team" class="main-section team">
-            <div class="member-card first">
-                <div class="member-top">
-                    <img src="./images/members/aster.png" alt="Photo de Achille Roussel" class="member-photo">
-                    <h3 class="member-name">Achille Roussel</h3>
+            <div class="team-cards">
+                <div class="member-card first">
+                    <div class="member-top">
+                        <img src="./images/members/aster.png" alt="Photo de Achille Roussel" class="member-photo">
+                        <h3 class="member-name">Achille Roussel</h3>
+                    </div>
+                    <p class="member-description">"Ce n'est qu'en perdant la liberté qu'on en saisit la pleine valeur"</p>
+                    <button class="member-button" onclick="window.location.href='https://rmbi.ch/aster'">Visiter</button>
                 </div>
-                <p class="member-description">"Ce n'est qu'en perdant la liberté qu'on en saisit la pleine valeur"</p>
-                <button class="member-button" onclick="window.location.href='https://rmbi.ch/aster'">Visiter</button>
-            </div>
-            <div class="member-card">
-                <div class="member-top">
-                    <img src="./images/members/isaia.jpeg" alt="Photo de Isaia Placi" class="member-photo">
-                    <h3 class="member-name">Isaia Placi</h3>
+                <div class="member-card">
+                    <div class="member-top">
+                        <img src="./images/members/isaia.jpeg" alt="Photo de Isaia Placi" class="member-photo">
+                        <h3 class="member-name">Isaia Placi</h3>
+                    </div>
+                    <p class="member-description">"Le code n'est pas juste une langue, c'est une manière de penser"</p>
+                    <button class="member-button" onclick="window.location.href='https://placi.dyn.mk'">Visiter</button>
                 </div>
-                <p class="member-description">"Le code n'est pas juste une langue, c'est une manière de penser"</p>
-                <button class="member-button" onclick="window.location.href='https://placi.dyn.mk'">Visiter</button>
-            </div>
-            <div class="member-card">
-                <div class="member-top">
-                    <img src="./images/members/jdm.png" alt="Photo de Julien de Montmollin" class="member-photo">
-                    <h3 class="member-name">Julien de Montmollin</h3>
+                <div class="member-card">
+                    <div class="member-top">
+                        <img src="./images/members/jdm.png" alt="Photo de Julien de Montmollin" class="member-photo">
+                        <h3 class="member-name">Julien de Montmollin</h3>
+                    </div>
+                    <p class="member-description">"Le meilleur moyen de prédire le futur, c'est de le créer."</p>
+                    <button class="member-button" onclick="window.location.href='https://rmbi.ch/jdm'">Visiter</button>
                 </div>
-                <p class="member-description">"Le meilleur moyen de prédire le futur, c'est de le créer."</p>
-                <button class="member-button" onclick="window.location.href='https://rmbi.ch/jdm'">Visiter</button>
-            </div>
-            <div class="member-card">
-                <div class="member-top">
-                    <img src="./images/members/vital.png" alt="Photo de Vital Vuillaume" class="member-photo">
-                    <h3 class="member-name">Vital Vuillaume</h3>
+                <div class="member-card">
+                    <div class="member-top">
+                        <img src="./images/members/vital.png" alt="Photo de Vital Vuillaume" class="member-photo">
+                        <h3 class="member-name">Vital Vuillaume</h3>
+                    </div>
+                    <p class="member-description">"Le numérique est ma toile, le code est ma couleur."</p>
+                    <button class="member-button" onclick="window.location.href='https://github.com/Vital-Vuillaume'">Visiter</button>
                 </div>
-                <p class="member-description">"Le numérique est ma toile, le code est ma couleur."</p>
-                <button class="member-button" onclick="window.location.href='https://github.com/Vital-Vuillaume'">Visiter</button>
             </div>
         </section>
 

diff --git a/styles/about.css b/styles/about.css
@@ -37,16 +37,15 @@
 }
 
 .about-image {
-    transform: translateY(30px);
-    height: calc(100vh - 240px);
     border-radius: var(--border-radius);
     box-shadow: 10px 10px 0px 0px var(--primary-color);
+    height: auto;
+    max-width: 50%;
 }
 
-@media screen and (max-width: 1500px) { 
+@media screen and (max-height: 1200px) {
     .about-image {
-        height: auto;
-        max-width: 90%;
+        max-height: 50vh;
     }
 }
 

diff --git a/styles/header.css b/styles/header.css
@@ -24,6 +24,7 @@
     width: 100%; 
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
     background: rgba(255, 255, 255, 0.1);
     transition: height 0.25s ease-out;
 }

diff --git a/styles/home.css b/styles/home.css
@@ -214,6 +214,12 @@
 
 }
 
+@media screen and (max-height: 630px) {
+    .slogan {
+        font-size: 22px;
+    }
+}
+
 @media (pointer: coarse) {
     .buy-button:hover {
         transform: scale(1);

diff --git a/styles/styles.css b/styles/styles.css
@@ -43,4 +43,7 @@ img {
     height: 100vh;
     padding-left: 50px;
     padding-right: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
diff --git a/styles/team.css b/styles/team.css
@@ -1,10 +1,14 @@
 .team {
-    padding: 80px 50px 0;
+    padding: 0px;
+}
+
+.team-cards {
+
     display: flex;
-    gap: 75px;
+    padding: 2% 25px 2% 25px;
+    gap: 300px;
     justify-content: center;
-    align-items: center;
-    overflow: auto;
+
 }
 
 .member-card {
@@ -76,13 +80,21 @@
     transform: scale(0.95);
 }
 
-@media screen and (max-width: 1900px) {
-    .team {
-        justify-content: flex-start;
+@media screen and (max-width: 2500px) {
+    .team-cards {
+        gap: 110px;
+    }
+}
+
+@media screen and (max-width: 1870px) {
+    .team-cards {
+        justify-content: left;
+        overflow: auto;
     }
 }
 
 @media screen and (max-height: 850px) {
+
     .member-card {
         height: 62.5vh;
     }
@@ -93,25 +105,19 @@
 }
 
 @media screen and (max-height: 750px) {
-    .team {
-        gap: 30px;
-    }
 
     .member-card {
         transform: scale(0.9);
     }
 }
 
 @media screen and (max-height: 700px) {
-    .team {
-        gap: 20px;
+    .team-cards {
+        gap: 50px;
     }
 }
 
 @media screen and (max-width: 500px) {
-    .team {
-        padding: 80px 30px 0 30px;
-    }
 
     .member-card {
         flex-basis: calc(100vw - 75px);