Site :

- Add Home page 3
    - Upgrade footer

site/interface/site/index.html

@@ -41,7 +41,6 @@
 	</div>
 	<section class="homeSection">
 		<p>THREEJS</p>
-		
 	</section>
 	<section class="homeSection relative">
 		<img id="firstBall" src="style/ball3D2.png">
@@ -52,10 +51,50 @@
 		</div>
 	</section>
 	<section class="homeSection">
-		<p>EKIP</p>
+		<div class="team">
+			<div class="team-member">
+				<img src="style/tomoron.png" alt="Tom" class="team-photo">
+				<h2>Tom, tomoron</h2>
+				<p>Partie Backend</p>
+				<div class="info">
+					<p>Tom est spécialisé en développement backend et travaille principalement avec Node.js et MongoDB.</p>
+				</div>
+			</div>
+			<div class="team-member">
+				<img src="style/madegryc.png" alt="Mathis" class="team-photo">
+				<h2>Mathis, madegryc</h2>
+				<p>Partie Frontend / Design</p>
+				<div class="info">
+					<p>Tom est spécialisé en développement backend et travaille principalement avec Node.js et MongoDB.</p>
+				</div>
+			</div>
+			<div class="team-member">
+				<img src="style/edbernard.png" alt="Eddy" class="team-photo">
+				<h2>Eddy, edbernar</h2>
+				<p>Partie Midend</p>
+				<div class="info">
+					<p>Tom est spécialisé en développement backend et travaille principalement avec Node.js et MongoDB.</p>
+				</div>
+			</div>
+			<div class="team-member">
+				<img src="style/hubourge.png" alt="Hugo" class="team-photo">
+				<h2>Hugo, hubourge</h2>
+				<p>Partie jeu</p>
+				<div class="info">
+					<p>Tom est spécialisé en développement backend et travaille principalement avec Node.js et MongoDB.</p>
+				</div>
+			</div>
+		</div>
 	</section>
 	<footer>
-		<p>PTME</p>
+		<div class="footer-content">
+            <div class="footer-left">
+                <h1>PTME</h1>
+                <p>ft_transcendance project<br>for 42 shcool</p>
+            </div>
+            <div class="footer-right">
+                <p>2024</p>
+            </div>
 	</footer>
 </body>
 </html>

site/interface/site/main.js

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   main.js                                            :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: marvin <marvin@student.42.fr>              +#+  +:+       +#+        */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:50:35 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/14 11:32:50 by marvin           ###   ########.fr       */
+/*   Updated: 2024/08/14 18:25:04 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -19,7 +19,7 @@ window.addEventListener('scroll', function() {
 	const rotationAngle = scrollPosition * 0.1; // Ajustez ce facteur pour contrôler l'angle de rotation
 	const parallaxElement = document.querySelector('#firstBall');
 	const parallaxElement2 = document.querySelector('#secondBall');
-	const parallaxSpeed = scrollPosition * -0.15; // Ajustez ce facteur pour ralentir le défilement
+	const parallaxSpeed = scrollPosition * -0.17; // Ajustez ce facteur pour ralentir le défilement
 
 	// Appliquer la rotation en fonction de la position de défilement
 	parallaxElement.style.transform = `translateX(-50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;

site/interface/site/style/home.css

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   home.css                                           :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: marvin <marvin@student.42.fr>              +#+  +:+       +#+        */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 12:00:55 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/14 12:39:25 by marvin           ###   ########.fr       */
+/*   Updated: 2024/08/14 18:55:27 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -194,11 +194,86 @@ body {
 	background-color: #f0f0f0;
 }
 
+.team {
+    display: flex;
+    gap: 40px;
+	padding-inline: 200px;
+	padding-block: 200px;
+	justify-content: center;
+}
+
+.team h2 {
+	color: white;
+	font-family: "Poppins", sans-serif;
+	font-weight: 500;
+	font-style: normal;
+	font-size: 30px;
+}
+
+.team-member {
+    max-width: 350px;
+	transition: transform 0.3s ease;
+}
+
+.team-member:hover {
+    transform: scale(1.2);
+}
+
+
+.team-member:not(:hover) {
+    transform: scale(0.8);
+}
+
+.team-photo {
+    width: 100%;
+    height: auto;
+}
+
+.info {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) translateY(10px);
+    background-color: rgba(0, 0, 0);
+    padding: 10px;
+    width: 100%;
+    opacity: 0;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.team-member:hover .info {
+    transform: translateX(-50%) translateY(25%);
+    opacity: 1;
+}
+
 footer {
-	padding: 15px;
+	padding: 25px;
-	display: flex;
 	overflow: hidden;
-	height: 200px;
+	height: 150px;
 	background-color: white;
+	font-family: "Poppins", sans-serif;
+	font-weight: 500;
+	font-style: normal;
 	color: #020202;
-  }
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.footer-left h1 {
+    font-size: 1.5em;
+	font-style: italic;
+    font-weight: bold;
+    margin: 0;
+}
+
+.footer-left p {
+    color: #afafaf;
+}
+
+.footer-right p {
+    font-weight: bold;
+}