Optimisation & Members card

index.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="./styles/header.css">
     <link rel="stylesheet" href="./styles/home.css">
     <link rel="stylesheet" href="./styles/about.css">
+    <link rel="stylesheet" href="./styles/team.css">
 
     <script src="./scripts/script.js" defer></script>
     <title>RecyTech</title>
@@ -78,7 +79,17 @@ <h2 class="about-title">À propos</h2>
                 <img class="about-image" src="./images/template.jpg" alt="Reconditionnement d'ordinateurs">
             </div>
         </section>    
-        <section id="team" class="main-section team"></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">Chief front-end developer</p>
+                </div>
+                <p class="member-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, doloremque maiores suscipit, accusantium fugit nobis laborum veritatis facilis iusto, reiciendis nulla! Rerum, ipsa reprehenderit est incidunt exercitationem ex molestiae sequi?</p>
+                <button class="member-button">Visiter</button>
+            </div>
+        </section>
         <section id="contact" class="main-section contact"></section>
     </main>
 </body>

styles/about.css

@@ -18,14 +18,12 @@
 }
 
 .about-title {
-    font-family: "Raleway-SemiBold";
     color: var(--primary-color);
     font-size: 40px;
     margin-bottom: 20px;
 }
 
 .about-text {
-    font-family: "Raleway-SemiBold";
     color: var(--primary-color);
     font-size: 18px;
     line-height: 1.6;

styles/header.css

@@ -45,7 +45,6 @@
     margin-right: -10px;
     transform: translateX(-10px);
     color: var(--text-color);
-    font-family: "Raleway-SemiBold";
     user-select: none;
     -webkit-user-select: none;
 }
@@ -82,7 +81,6 @@
 
 .header-link {
     display: flex;
-    font-family: "Raleway-SemiBold";
     font-size: 20px;
     text-decoration: none;
     color: var(--text-color);

styles/home.css

@@ -1,15 +1,3 @@
-main {
-    margin-top: var(--header-height);
-    overflow: hidden; /*temp*/
-}
-
-.main-section {
-    width: 100%;
-    height: 100vh;
-    padding-left: 50px;
-    padding-right: 50px;
-}
-
 .product {
     display: flex;
     gap: 150px;
@@ -27,7 +15,6 @@ main {
 }
 
 .slogan {
-    font-family: Raleway-SemiBold;
     color: var(--secondary-color);
     font-size: 55px;
 }
@@ -66,7 +53,6 @@ main {
 .buy-text {
     color: var(--text-color);
     text-shadow: 1px 1px 0px #0000004f;
-    font-family: Raleway-SemiBold;
     font-size: 1.3em;
     width: 82.5%;
     position: absolute;
@@ -76,7 +62,6 @@ main {
 
 .buy-button {
     background-color: var(--text-color);
-    font-family: Raleway-SemiBold;
     font-size: 30px;
     border-radius: 40px;
     color: var(--secondary-color);

styles/styles.css

@@ -9,6 +9,7 @@
     padding: 0;
     box-sizing: border-box;
     scroll-behavior: smooth;
+    font-family: "Raleway-SemiBold";
 }
 
 :root {
@@ -32,7 +33,19 @@ body.is-hamburger-active {
     overflow: hidden;
 }
 
+main {
+    margin-top: var(--header-height);
+    overflow: hidden; /*temp*/
+}
+
 img {
     user-select: none;
     -webkit-user-select: none;
 }
+
+.main-section {
+    width: 100%;
+    height: 100vh;
+    padding-left: 50px;
+    padding-right: 50px;
+}

styles/team.css

@@ -0,0 +1,59 @@
+.team {
+    padding-top: 80px;
+}
+
+.member-card {
+    border-radius: var(--border-radius);
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    height: 600px;
+    width: 25vw;
+    color: var(--primary-color);
+    background-color: var(--secondary-color);
+}
+
+.member-photo {
+    /* border: 4px solid var(--primary-color); */
+    border-radius: var(--border-radius) var(--border-radius) 0px 0px;
+    width: 100%;
+    height: 40%;
+    object-fit: cover;
+}
+
+.name-role-container {
+    border-radius: calc(var(--border-radius) - 15px);
+    top: 207.5px;
+    padding: 10px;
+    position: absolute;
+    left: 50%;
+    width: 220px;transform: translateX(-50%);
+    text-align: center;
+    color: var(--secondary-color);
+    background-color: var(--primary-color);
+}
+
+.member-description {
+    margin: 50px 20px 20px 20px;
+    font-size: 20px;
+    height: 210px;
+}
+
+.member-button {
+    width: calc(100% - 40px);
+    border-radius: 40px;
+    height: 60px;
+    font-size: 30px;
+    text-align: center;
+    color: var(--secondary-color);
+    background-color: var(--text-color);
+    cursor: pointer;
+    transition: 1.2s;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.member-button:hover {
+    transform: scale(0.95);
+}