team respensive

RecyLife · Oct 12, 2024 · 97d8cb5 · 97d8cb5
1 parent a115e44
commit 97d8cb5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 45 deletions.
diff --git a/images/members/vital.png b/images/members/vital.png
diff --git a/index.html b/index.html
@@ -64,59 +64,38 @@ <h1 id="headerTitle" class="header-title">RecyTech</h1>
                 </div>
             </div>
         </section>
-        <section id="about" class="main-section about">
-            <div class="about-text-content">
-                <h2 class="about-title">À propos</h2>
-                <p class="about-text">
-                    Nous sommes un groupe d'étudiants en informatique, notre projet consiste à récupérer des pièces d'ordinateurs usagées auprès des écoles de la région, de les restaurer et de les revendre à prix abordables.
-                    Nous proposons également des PC complets, réassemblés et remis à neuf, avec un choix de distributions Linux adaptées à différents besoins.
-                </p>
-                <p class="about-text">
-                    L'objectif est de rendre l'informatique accessible tout en contribuant à la réduction des déchets électroniques. 
-                    Chaque machine est soigneusement vérifiée et remise en état, offrant une solution économique et durable pour les étudiants, les petites entreprises, et toute personne à la recherche d'un PC fiable à petit prix.
-                </p>
-            </div>
-
-            <div class="about-image-content">
-                <img class="about-image" src="./images/template.jpg" alt="Reconditionnement d'ordinateurs">
-            </div>
-        </section>    
         <section id="team" class="main-section team">
             <div class="member-card">
                 <img src="./images/members/aster.png" alt="Achille Roussel logo" class="member-photo">
                 <div class="name-role-container">
                     <h1 class="member-name">Achille Roussel</h1>
-                    <p class="member-role">Chef Dévelopeur Front-end</p>
                 </div>
                 <p class="member-description">J'ai toujours eu envie de créer et de partager des choses avec le monde, qu'elles soient utiles ou non, peu importe. Je suis un grand passionné des sciences et je m'intéresse de près aux libertés fondamentales ainsi qu'aux outils pour les préserver. Je dénonce une société de plus en plus surveillée.</p>
-                <button class="member-button" onclick="window.open('https://rmbi.ch/aster')">Visiter</button>
+                <button class="member-button" onclick="window.location.href='rmbi.ch/aster'">Visiter</button>
             </div>
             <div class="member-card">
                 <img src="./images/members/isaia.jpeg" alt="Isaia Placi logo" class="member-photo">
                 <div class="name-role-container">
                     <h1 class="member-name">Isaia Placi</h1>
-                    <p class="member-role">Dévelopeur Front-End</p>
                 </div>
                 <p class="member-description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo voluptas architecto est necessitatibus cumque aperiam delectus atque, omnis doloremque veniam dignissimos vero incidunt sunt distinctio in qui doloribus minima pariatur perspiciatis quis tenetur facere ad. Placeat, ipsam dolor!</p>
-                <button class="member-button" onclick="window.open('https://placi.dyn.mk')">Visiter</button>
+                <button class="member-button" onclick="window.location.href='placi.dyn.mk'">Visiter</button>
             </div>
             <div class="member-card">
                 <img src="./images/members/jdm.png" alt="Julien de Montmollin logo" class="member-photo">
                 <div class="name-role-container sp1">
                     <h1 class="member-name">Julien de Montmollin</h1>
-                    <p class="member-role">Dévelopeur Back-end</p>
                 </div>
                 <p class="member-description"> Pendant mon temps libre, j'aime coder des projets plus ou moin utiles. Pour moi l'informatique, le développement et Internet sont un monde d'innovation limité uniquement par l'imagination de personnes motivées. J'essaie à travers mes projets et mes usages de promouvoir un Internet plus libre, plus ouvert et plus fun.</p>
-                <button class="member-button" onclick="window.open('https://rmbi.ch/jdm')">Visiter</button>
+                <button class="member-button" onclick="window.location.href='rmbi.ch/jdm'">Visiter</button>
             </div>
             <div class="member-card">
                 <img src="./images/members/vital.png" alt="Vital Vuillaume logo" class="member-photo">
                 <div class="name-role-container sp2">
                     <h1 class="member-name">Vital Vuillaume</h1>
-                    <p class="member-role">Reponsable Communication & Dévelopeur Front-end</p>
                 </div>
-                <p class="member-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae maxime magni eius facere, laboriosam natus amet delectus excepturi debitis iusto fugiat repellendus nam ducimus nobis doloremque sint deleniti tempore impedit dolorem! Eaque officia omnis consequatur pariatur iste ea.</p>
-                <button class="member-button" onclick="window.open('https://rmbi.ch/vital')">Visiter</button>
+                <p class="member-description">Passionné par le numérique et la programmation, je m'investis dans des projets innovants qui allient technologie et créativité.</p>
+                <button class="member-button" onclick="window.location.href='https://github.com/Vital-Vuillaume'">Visiter</button>
             </div>
         </section>
         <section id="contact" class="main-section contact">

diff --git a/styles/team.css b/styles/team.css
@@ -1,7 +1,11 @@
 .team {
-    padding-top: 80px;
+    overflow: auto;
     display: flex;
-    gap: 10px;
+    justify-content: center;
+    align-items: center;
+    gap: 75px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 .member-card {
@@ -11,7 +15,9 @@
     align-items: center;
     flex-direction: column;
     height: 600px;
-    width: 350px;
+    flex-basis: 400px; 
+    flex-grow: 0; 
+    flex-shrink: 0; 
     color: var(--primary-color);
     background-color: var(--secondary-color);
 }
@@ -20,50 +26,42 @@
     /* border: 4px solid var(--primary-color); */
     border-radius: var(--border-radius) var(--border-radius) 0px 0px;
     width: 100%;
-    height: 40%;
+    height: 50%;
     object-fit: cover;
     background: #000000;
 }
 
 .name-role-container {
     border-radius: calc(var(--border-radius) - 15px);
-    top: 207.5px;
+    top: 275.5px;
     padding: 10px;
     position: absolute;
     left: 50%;
-    width: 220px;transform: translateX(-50%);
+    width: 90%;
+    transform: translateX(-50%);
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
     text-align: center;
     color: var(--secondary-color);
     background-color: var(--primary-color);
 }
 
-.sp1 {
-    width: 240px;
-}
-
-.sp2 {
-    top: 200px;
-}
-
 .member-name {
     font-size: 20px;
 }
 
-.member-role {
-    font-size: 14px;
-}
-
 .member-description {
-    margin: 50px 30px 20px 30px;
+    margin: 65px 30px 20px 30px;
     font-size: 18px;
     height: 210px;
+    overflow: auto;
 }
 
 .member-button {
     width: calc(100% - 60px);
     border-radius: 40px;
     height: 60px;
+    position: relative;
+    bottom: 15px;
     font-size: 30px;
     text-align: center;
     color: var(--secondary-color);
@@ -78,6 +76,20 @@
     transform: scale(0.95);
 }
 
+@media screen and (max-width: 1900px) {
+
+    .team {
+        justify-content: left;
+    }
+
+}
+
+@media screen and (max-width: 500px) {
+    .member-card {
+        height: 515px;
+    }
+}
+
 @media (pointer: coarse) {
     .member-button {
         transform: scale(1);