g404-dev-web · SoslanGab · May 26, 2023 · May 26, 2023 · May 26, 2023 · May 26, 2023
diff --git a/agile-dev/css/custom.css b/agile-dev/css/custom.css
@@ -0,0 +1,180 @@
+/* NAV BAR */
+nav .imagelogo {
+    padding-left: 25px;
+    padding-top: 9px;
+}
+
+nav .listenav {
+    padding-right: 35px;
+}
+
+/* FIN NAV BAR */
+
+/* DEB section 1 */
+.section1 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    background-color: #9c9c9c;
+}
+
+img {
+    width: 200px;
+}
+
+
+.logo {
+    width: 50px;
+    height: 50px;
+}
+
+.buttonsec1 {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    padding-left: 1200px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.3s;
+    opacity: 0.8;
+  }
+
+
+/* section 1 */
+
+/* DEB SECTION 2 ET 3 */
+
+.section-2 {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    /* Centre le bloc horizontalement */
+    width: 80%;
+    /* Largeur du bloc */
+}
+
+.section2-img {
+    width: 200px;
+
+}
+
+.section-3 {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    width: 80%;
+}
+
+.section3-img {
+    width: 150px;
+  }
+
+.left {
+    flex: 1 1 auto;
+    /* Ne pas agrandir la zone automatiquement */
+    margin-right: 20px;
+    /* Marge à droite pour séparer les zones */
+}
+
+.left2 {
+    flex: 1 1 auto;
+    /* Ne pas agrandir la zone automatiquement */
+    text-align: right;
+    margin-right: 20px;
+    /* Marge à droite pour séparer les zones */
+}
+
+.center {
+    flex: 0 0 auto;
+    margin: 0 20px;
+    /* Marge à gauche et à droite pour séparer les zones */
+}
+
+.right {
+    flex: 1 1 auto;
+    /* Permet à la zone de droite de prendre toute la largeur disponible */
+}
+
+h2 {
+    font-size: 1.5em;
+    /* Taille du titre */
+}
+
+h3 {
+    font-size: 1.2em;
+    /* Taille du titre */
+}
+
+button {
+    padding: 10px 20px;
+    /* Espacement intérieur du bouton */
+}
+
+
+/* section 1 */
+.section1 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    background-color: #9c9c9c;
+  }
+
+  img {
+    width: 200px;
+  }
+
+
+  .logo {
+    width: 50px;
+    height: 50px;
+  }
+
+
+
+  .buttonsec1 {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    padding-left: 1200px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.3s;
+    opacity: 0.8;
+  }
+
+
+
+/* section 1 */
+nav .imagelogo{
+    padding-left: 25px;
+    padding-top: 9px;
+}
+nav .listenav{
+    padding-right: 35px;
+}
+
+/* Footer debut */
+.footerso {
+  background-color: #f1f1f1;
+  padding: 20px 0;
+  text-align: center;
+}
+
+.footerso .containerso {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.footerso p {
+  margin: 0;
+  font-size: 14px;
+  color: #888;
+}
+/* Fin footer */
+/* FIN SECTION 2 ET 3 */
diff --git a/agile-dev/index.html b/agile-dev/index.html
@@ -1,25 +1,134 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
+<!-- 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=""/>
+    <link type="text/css" rel="stylesheet" href="css/materialize.css"/>
     <!--Import your custom.css-->
-    <link type="text/css" rel="stylesheet" href=""/>
+    <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>
+    <title>🤙 Yo! app</title>
   </head>
   <body>
-
-    <!-- Start code here -->
+
+    <!-- Debut nav-bar -->
+      <header class="site-header">   
+        <nav>
+          <div class="nav-wrapper">
+            <a href="" class="brand-logo imagelogo">
+              <img src="img/logo_application.png" width="50" height="50" alt="">
+            </a>
+              <ul id="nav-mobile" class="right hide-on-med-and-down listenav">
+                <li style="margin-right: 15px;"><span>Sass</span></li>
+                <li><span>Components</span></li>
+                <li><a href="collapsible.html">JavaScript</a></li>
+              </ul>
+          </div>
+        </nav>
+      </header>
+    <!-- Fin nav-bar -->
 
-    <!-- finish code here -->
+    <!--Début section 1-->
+      <div class="section1">
+        <section>
+          <div class="iphone section1">
+            <img src="img/iphone_features_light.png" alt="iphone section1">
+            <div class="buttonsec1">
+              <h1 style="font-size: medium;">Lorem ipsum</h1>
+              <button><img src="img/download_ios.png" alt="boutton"></button>
+              <button><img src="img/download_android.png" alt="boutton"></button> 
+          </div>
+          </div>
+        </section>
+      </div>
+    <!--Fin section 1-->
+
+<!-- DEB SECTION 2 -->
+
+  <div class="section-2">
+    <div class="left">
+      <img class="section2-img" src="img/iphone_cover_light.png" alt="appli-iphone">
+    </div>
+    <div class="right">
+      <h2>Benefice</h2>
+      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+        Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
+        of Lorem Ipsum.</p>
+      <button>Bouton</button>
+    </div>
+  </div>
+
+  <!-- FIN SECTION 2-->
+
+  <!-- DEB SECTION 3 -->
+
+  <div class="section-3">
+    <div class="left2">
+      <h3>Benefice 2</h3>
+      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+        scrambled it to
+        make a type specimen book. It has survived not only five centuries, but also the leap into electronic
+        typesetting,
+        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+        containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
+        including
+        versions of Lorem Ipsum.</p>
+    </div>
+    <div class="center">
+      <img class="section3-img" src="img/iphone_side_light.png" alt="appli-iphone" width=250px >>
+    </div>
+      <div class="right">
+        <h3>Benefice 3</h3>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+          industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to
+          make a type specimen book. It has survived not only five centuries, but also the leap into electronic
+          typesetting,
+          remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+          containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
+          including
+          versions of Lorem Ipsum.</p>
+        <h3>Benefice 4</h3>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+          industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to
+          make a type specimen book. It has survived not only five centuries, but also the leap into electronic
+          typesetting,
+          remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+          containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
+          including
+          versions of Lorem Ipsum.</p>
+      </div>
+  </div>
+    <!-- FIN SECTION 3-->
+
+    <!--Début section 4-->
+
+    <!--Fin section 4-->
+
+    <!-- Footer -->
+      <footer class="footerso">
+        <div class="containerso">
+          <p class="copyright">
+            &copy; 2023 Nom de l'entreprise. Tous droits réservés.
+          </p>
+        </div>
+      </footer>
+    <!-- Fin du Footer -->
 
     <!--Import materialize.js - JavaScript at end of body for optimized loading-->
-    <script type="text/javascript" src=""></script>
+    <script type="text/javascript" src="materialize.js"></script>
     <!--Import your custom.js-->
     <script type="text/javascript" src=""></script>
-  </body>
-</html>
+</body>
+<!-- finish code here -->
+