diff --git a/agile-dev/css/custom.css b/agile-dev/css/custom.css index e69de29..f7a2e3e 100644 --- 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 index 2fb0a11..56a75fd 100644 --- a/agile-dev/index.html +++ b/agile-dev/index.html @@ -1,25 +1,134 @@ - + + + + - + - + - 🤙 Yo! application 🤙 | Simplon + 🤙 Yo! app - - + + +
+ +
+ - + +
+
+
+ iphone section1 +
+

Lorem ipsum

+ + +
+
+
+
+ + + + +
+
+ appli-iphone +
+
+

Benefice

+

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.

+ +
+
+ + + + + +
+
+

Benefice 2

+

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.

+
+
+ appli-iphone> +
+
+

Benefice 3

+

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.

+

Benefice 4

+

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.

+
+
+ + + + + + + + + - + - - + + +