Add new file

ALVARIZA-BILLAR_DESERT_KANY/style.css

+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Corps de la page */
+body {
+    font-family: 'Poppins', sans-serif;
+    background: linear-gradient(135deg, #2e3a59, #415a77);
+    color: white;
+}
+
+/* Header avec image de fond */
+header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 150px;  
+    background: linear-gradient(135deg, #1e3c72, #2a5298);
+    position: relative;
+    padding: 10px 0;
+}
+
+header .hopper-image {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    position: absolute;
+    left: 20px;  
+    top: 50%;
+    transform: translateY(-50%);  
+    transition: transform 0.3s ease;
+}
+
+header .hopper-image:hover {
+    transform: scale(1.1);  /* Zoom léger survol */
+}
+
+header .header-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+header h1 {
+    font-size: 2.5rem;
+    background: linear-gradient(90deg, #ff8a00, #e52e71);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-left: 120px;  
+}
+
+/* Conteneur principal pour les sections */
+#webGL {
+    margin: 40px auto;
+    width: 80%;
+}
+
+/* Mise en page des sections en deux colonnes */
+.content-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+}
+
+/* Section de l'image */
+.image-section {
+    flex: 1;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
+    text-align: center;
+}
+
+.image-section h2 {
+    font-size: 2rem;
+    color: #ff8a00;
+    margin-bottom: 15px;
+}
+
+.image-section img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+    max-height: 300px;
+    object-fit: cover;
+    transition: transform 0.3s ease, filter 0.3s ease;
+    cursor: pointer;
+}
+
+.image-section img:hover {
+    transform: scale(1.05);
+    filter: brightness(1.2);
+}
+
+/* Section du projet 3D */
+.project-section {
+    flex: 1;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
+    text-align: center;
+}
+
+.project-section h2 {
+    font-size: 2rem;
+    color: #ff8a00;
+    margin-bottom: 15px;
+}
+
+.project-section p {
+    font-size: 1.2rem;
+    color: #ddd;
+}
+
+/* Animation et transition */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+header, .image-section, .project-section {
+    animation: fadeIn 1s ease-in-out;
+}