diff --git a/images/members/vital.png b/images/members/vital.png index 2a202d9..1d96724 100644 Binary files a/images/members/vital.png and b/images/members/vital.png differ diff --git a/index.html b/index.html index 2230ab6..b6cada7 100644 --- a/index.html +++ b/index.html @@ -64,59 +64,38 @@

RecyTech

-
-
-

À propos

-

- 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. -

-

- 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. -

-
- -
- Reconditionnement d'ordinateurs -
-
Achille Roussel logo

Achille Roussel

-

Chef Dévelopeur Front-end

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.

- +
Isaia Placi logo

Isaia Placi

-

Dévelopeur Front-End

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!

- +
Julien de Montmollin logo

Julien de Montmollin

-

Dévelopeur Back-end

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.

- +
Vital Vuillaume logo

Vital Vuillaume

-

Reponsable Communication & Dévelopeur Front-end

-

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.

- +

Passionné par le numérique et la programmation, je m'investis dans des projets innovants qui allient technologie et créativité.

+
diff --git a/styles/team.css b/styles/team.css index f5772c9..6515649 100644 --- 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);