diff --git a/agile-dev/css/custom.css b/agile-dev/css/custom.css
index e69de29..f934660 100644
--- a/agile-dev/css/custom.css
+++ b/agile-dev/css/custom.css
@@ -0,0 +1,171 @@
+
+<<<<<<< HEAD
+footer p {
+    font-family: Georgia ;
+    color: antiquewhite;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+}
+
+footer .logo {
+    filter: invert(1);
+    display: flex;
+    gap: 50px;
+    justify-content:flex-end; 
+    margin-right: 30px;
+}
+.logo img {
+	-webkit-transform: scale(1);
+	transform: scale(1);
+	-webkit-transition: .3s ease-in-out;
+	transition: .3s ease-in-out;
+}
+.logo :hover img {
+	-webkit-transform: scale(1.3);
+	transform: scale(1.3);}
+=======
+=======
+>>>>>>> be461837895bbdb88397366fb76a120cf7660cc5
+.header {
+    background-color: black;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 10px;
+
+}
+
+.header img {
+    width: 150px;
+
+}
+
+.header ul {
+    display: flex;
+    text-decoration: none;
+}
+
+.header li {
+    margin: 10px;
+    color: white;
+    list-style: none;
+
+}
+
+.corps {
+    background-color: orangered;
+    width: 100%;
+    height: 700px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+}
+
+.title {
+    color: white;
+    text-align: center;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-size: 120px;
+    transition-duration: 4s;
+}
+
+.phrasetexte {
+    color: white;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    text-align: center;
+    font-size: 20px;
+
+}
+
+.h1 {
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+
+.imageamesoeur {
+    height: 200px;
+    left: 700px;
+    margin: 150px;
+}
+
+.blocdeuxgeneral {
+    display: flex;
+    flex-direction: row;
+    align-items:first baseline;
+    justify-content: center;
+    width: 80%;
+    left: 250px;
+    top: 3em
+}
+
+.texteamesoeur {font-size: 17pt;
+                left: 400px;}
+
+.titreettexteamesoeuretbouton {
+    display: flex;
+    flex-direction: column;
+}
+
+.containerbig {
+    font-size: 20px;
+    font-family: Georgia;
+    background-color:pink ;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.textG {
+    display:flex;
+    flex-direction: column;
+    text-align: end;
+    
+}
+
+.imgtel{
+   margin: 40px;
+   }
+
+   .texteD1{
+    margin-right: 30px;
+   }
+
+   .texteD2{
+    margin-right: 30px;
+   }
+
+footer {
+    font-size: 20px;
+    padding: 8px;
+    background-color: rgb(0,0,0);
+    margin: 0;
+    height: 200px;
+    width: 100%;
+}
+
+footer p {
+    font-family: Georgia ;
+    color: antiquewhite;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+}
+
+footer .logo {
+    filter: invert(1);
+    display: flex;
+    gap: 50px;
+    justify-content:flex-end; 
+    margin-right: 30px;
+}
+.logo img {
+	-webkit-transform: scale(1);
+	transform: scale(1);
+	-webkit-transition: .3s ease-in-out;
+	transition: .3s ease-in-out;
+}
+.logo :hover img {
+	-webkit-transform: scale(1.3);
+	transform: scale(1.3);
+}
diff --git a/agile-dev/css/materialize.css b/agile-dev/css/materialize.css
index bc6c1fe..68bb261 100644
--- a/agile-dev/css/materialize.css
+++ b/agile-dev/css/materialize.css
@@ -1,8 +1,8 @@
-/*!
- * Materialize v1.0.0 (http://materializecss.com)
- * Copyright 2014-2017 Materialize
- * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
- */
+/*!
+ * Materialize v1.0.0 (http://materializecss.com)
+ * Copyright 2014-2017 Materialize
+ * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
+ */
 .materialize-red {
   background-color: #e51c23 !important;
 }
@@ -5622,13 +5622,13 @@ body.keyboard-focused .dropdown-content li:focus {
   cursor: pointer;
 }
 
-/*!
- * Waves v0.6.0
- * http://fian.my.id/Waves
- *
- * Copyright 2014 Alfiana E. Sibuea and other contributors
- * Released under the MIT license
- * https://github.com/fians/Waves/blob/master/LICENSE
+/*!
+ * Waves v0.6.0
+ * http://fian.my.id/Waves
+ *
+ * Copyright 2014 Alfiana E. Sibuea and other contributors
+ * Released under the MIT license
+ * https://github.com/fians/Waves/blob/master/LICENSE
  */
 .waves-effect {
   position: relative;
@@ -7038,7 +7038,7 @@ textarea.materialize-textarea {
   border-color: #949494;
 }
 
-/* Switch
+/* Switch
    ========================================================================== */
 .switch,
 .switch * {
@@ -7286,7 +7286,7 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   padding-left: 1rem;
 }
 
-/* File Input
+/* File Input
    ========================================================================== */
 .file-field {
   position: relative;
@@ -7752,30 +7752,30 @@ input[type=range]::-ms-thumb {
   display: none;
 }
 
-/*
-    @license
-    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-    Code distributed by Google as part of the polymer project is also
-    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+/*
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+    Code distributed by Google as part of the polymer project is also
+    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
 /**************************/
 /* STYLES FOR THE SPINNER */
 /**************************/
-/*
- * Constants:
- *      STROKEWIDTH = 3px
- *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
- *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
- *      ARCSTARTROT = 216 degrees (how much the start location of the arc
- *                                should rotate each time, 216 gives us a
- *                                5 pointed star shape (it's 360/5 * 3).
- *                                For a 7 pointed star, we might do
- *                                360/7 * 3 = 154.286)
- *      CONTAINERWIDTH = 28px
- *      SHRINK_TIME = 400ms
+/*
+ * Constants:
+ *      STROKEWIDTH = 3px
+ *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
+ *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
+ *      ARCSTARTROT = 216 degrees (how much the start location of the arc
+ *                                should rotate each time, 216 gives us a
+ *                                5 pointed star shape (it's 360/5 * 3).
+ *                                For a 7 pointed star, we might do
+ *                                360/7 * 3 = 154.286)
+ *      CONTAINERWIDTH = 28px
+ *      SHRINK_TIME = 400ms
  */
 .preloader-wrapper {
   display: inline-block;
@@ -7841,18 +7841,18 @@ input[type=range]::-ms-thumb {
   border-color: #0f9d58;
 }
 
-/**
- * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
- *
- * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
- * guarantee that the animation will start _exactly_ after that value. So we avoid using
- * animation-delay and instead set custom keyframes for each color (as redundant as it
- * seems).
- *
- * We write out each animation in full (instead of separating animation-name,
- * animation-duration, etc.) because under the polyfill, Safari does not recognize those
- * specific properties properly, treats them as -webkit-animation, and overrides the
- * other animation rules. See https://github.com/Polymer/platform/issues/53.
+/**
+ * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
+ *
+ * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
+ * guarantee that the animation will start _exactly_ after that value. So we avoid using
+ * animation-delay and instead set custom keyframes for each color (as redundant as it
+ * seems).
+ *
+ * We write out each animation in full (instead of separating animation-name,
+ * animation-duration, etc.) because under the polyfill, Safari does not recognize those
+ * specific properties properly, treats them as -webkit-animation, and overrides the
+ * other animation rules. See https://github.com/Polymer/platform/issues/53.
  */
 .active .spinner-layer.spinner-blue {
   /* durations: 4 * ARCTIME */
@@ -8117,9 +8117,9 @@ input[type=range]::-ms-thumb {
   }
 }
 
-/**
- * Patch the gap that appear between the two adjacent div.circle-clipper while the
- * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
+/**
+ * Patch the gap that appear between the two adjacent div.circle-clipper while the
+ * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
  */
 .gap-patch {
   position: absolute;
@@ -8486,10 +8486,19 @@ input[type=range]::-ms-thumb {
   visibility: visible;
   -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
           animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
-  -webkit-transition: opacity .3s,
 visibility 0s 1s,
 -webkit-transform .3s;
-  transition: opacity .3s,
 visibility 0s 1s,
 -webkit-transform .3s;
-  transition: opacity .3s,
 transform .3s,
 visibility 0s 1s;
-  transition: opacity .3s,
 transform .3s,
 visibility 0s 1s,
 -webkit-transform .3s;
+  -webkit-transition: opacity .3s,
+ visibility 0s 1s,
+ -webkit-transform .3s;
+  transition: opacity .3s,
+ visibility 0s 1s,
+ -webkit-transform .3s;
+  transition: opacity .3s,
+ transform .3s,
+ visibility 0s 1s;
+  transition: opacity .3s,
+ transform .3s,
+ visibility 0s 1s,
+ -webkit-transform .3s;
 }
 
 .tap-target {
@@ -8542,10 +8551,19 @@ input[type=range]::-ms-thumb {
 
 .tap-target-wave::after {
   visibility: hidden;
-  -webkit-transition: opacity .3s,
 visibility 0s,
 -webkit-transform .3s;
-  transition: opacity .3s,
 visibility 0s,
 -webkit-transform .3s;
-  transition: opacity .3s,
 transform .3s,
 visibility 0s;
-  transition: opacity .3s,
 transform .3s,
 visibility 0s,
 -webkit-transform .3s;
+  -webkit-transition: opacity .3s,
+ visibility 0s,
+ -webkit-transform .3s;
+  transition: opacity .3s,
+ visibility 0s,
+ -webkit-transform .3s;
+  transition: opacity .3s,
+ transform .3s,
+ visibility 0s;
+  transition: opacity .3s,
+ transform .3s,
+ visibility 0s,
+ -webkit-transform .3s;
   z-index: -1;
 }
 
diff --git a/agile-dev/index.html b/agile-dev/index.html
index 2fb0a11..765e81d 100644
--- a/agile-dev/index.html
+++ b/agile-dev/index.html
@@ -1,25 +1,138 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <!--Import Google Icon Font-->
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <!--Import materialize.css-->
-    <link type="text/css" rel="stylesheet" href=""/>
-    <!--Import your custom.css-->
-    <link type="text/css" rel="stylesheet" href=""/>
-    <!--Let browser know website is optimized for mobile-->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>🤙 Yo! application 🤙 | Simplon</title>
-  </head>
-  <body>
-   
-    <!-- Start code here -->
+<head>
+  <!--Import Google Icon Font-->
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <!--Import materialize.css-->
+  <link type="text/css" rel="stylesheet" href="./css/materialize.css" />
+  <!--Import your custom.css-->
+  <link type="text/css" rel="stylesheet" href="css/custom.css" />
+  <!--Let browser know website is optimized for mobile-->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>🤙 Yo! application 🤙 | Simplon</title>
+
+
+</head>
+
+<body>
+  <!-- Start code here -->
+
+  <header class="header">
+    <div class="logoy">
+      <img src="./img/logo_application.png">
+    </div>
+    <ul>
+      <li><a href="https://www.google.com/">Connexion</a></li>
+      <li><a href="https://www.google.com/">Inscription</a></li>
+      <li><a href="https://www.google.com/">Mot de passe</a></li>
+    </ul>
+  </header>
+
+  <!-- corps du site -->
+
+  <div class="corps">
+    <div class="phone">
+      <img src="./img/iphone_cover_light.png" height="700px">
+
+
+    </div>
+
+
+    <div>
+      <h1 class="title">Yo ! L'application</h1>
+      <br>
+      <p class="phrasetexte">Lorem ipsum dolor sit amet consectetur
+        Lorem ipsum dolor sit. Lorem ipsum dolor sit
+        amet consectetur adipisicing elit.
+      </p>
+    </div>
+  </div>
+
+
+  <!-- debut Section Deux -->
+
+  <div class="imageamesoeur"><a href="#basdepage"></a><img src="img/iphone_isometric_light.png" height="300px" alt=""></div>
+
+  <div class="blocdeuxgeneral">
+    <div class="titreettexteamesoeuretbouton">
+
+      <div>
+        <h1 class="titreamesoeur">Application Yo ! "trouver l'Ame Soeur !"</h1>
+      </div>
+
+      <div class="texteamesoeur">
+        
+        <pre>
+Avec Yo, non seulement tu trouves l'Ame Soeur, mais en plus ça dure grave.
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum odio, pos
+simus provident vero vitae expedita culpa iusto odit nemo aspernatur numqu
+am nisi excepturi voluptate repellat atque fugit perspiciatis ab impedit. </p></pre>
+
+<br>
+      </div>
+      <div class="#basdepage"><a class="waves-effect waves-light btn">télécharger application</a></div>
+    <br>
+    <br>
+    
+    </div>
+  </div>
+  
+
+
+  <section class="containerbig">
+  
+    <div class="textG">
+      <h3>Chat !</h3>
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe ipsa dolore quasi amet officia, facilis velit
+        est incidunt quisquam culpa iste harum sint esse omnis. Facilis ab tenetur repellat eius!
+      </p>
+    </div>
+  
+    <div class="imgtel">
+  
+      <img src="img/iphone_side_light.png" height="600">
+    </div>
+    <div class="textesD">
+      <div class="texteD1">
+        <p>
+        <h3>Mood !</h3>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quam qui, quas assumenda nihil illo vero
+        consectetur. Earum, voluptates eos adipisci beatae dignissimos eligendi minima quis ratione saepe modi
+        exercitationem?
+        </p>
+        <br>
+        <br>
+      </div>
+  
+      <div class="texteD2">
+        <p>
+        <h3>Match ! </h3>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora voluptatum, ad facilis quos, nisi atque error
+        dolorum, accusamus itaque perferendis tempore amet veniam aliquid assumenda? Ex laborum maxime odit quia.
+        </p>
+      </div>
+  
+    </div>
+  </section>
+
+
+    <footer>
+
+      <br>
+      <div class="logo">
+        <a href="https://www.facebook.com/?locale=fr_FR"><img src="/agile-dev/img/facebook-f-brands.svg"
+            height="60px"></a>
+        <a href="https://www.instagram.com/"><img src="/agile-dev/img/instagram-brands.svg" height="60px"></a>
+        <a href="https://twitter.com/?lang=fr"><img src="/agile-dev/img/twitter-brands.svg" height="60px"></a>
+      </div>
+      <br>
+      <p> © 2023 R.O.Y.S </p>
+    </footer>
     
-    <!-- finish code here -->
+    <h6 id="basdepage"></h6>
 
     <!--Import materialize.js - JavaScript at end of body for optimized loading-->
     <script type="text/javascript" src=""></script>
     <!--Import your custom.js-->
     <script type="text/javascript" src=""></script>
-  </body>
-</html>
+</body>
+</html>
\ No newline at end of file