diff --git a/SwichGIT/Doc/Forme.md b/SwichGIT/Doc/Forme.md
index cfdc7db..1297887 100644
--- a/SwichGIT/Doc/Forme.md
+++ b/SwichGIT/Doc/Forme.md
@@ -42,15 +42,15 @@ En HTML pour coder un rond, nous partons d'une div simple (un quadrilatère) :
Et en CSS nous définissons
```CSS
.rond {
- //centrer la division
+ /*centrer la division*/
display: table;
margin: 0 auto;
- //définir la couleur
+ /*définir la couleur*/
background-color: #FFD100;
- //définir la taille
+ /*définir la taille*/
height: 3vw;
width: 3vw;
- //définir un arondie à notre div
+ /*définir un arondie à notre div*/
border-radius: 3vw;
}
```
@@ -60,17 +60,30 @@ Notre objectif étant de réaliser la figure suivante :
+En HTML pour coder les formes ci-dessus :
+```HTML
+
+
+```
+
Code forme anneau :
```css
:root{
+ --couleur : black;
+ --couleurfond : white;
/*Valeur à changer en fonction*/
--x : 6vw;
--d : calc(var(--x_longueur)/2);
--e : calc(var(--x_longueur)/4);
}
-
.anneau {
- background-color: #FFD100;
+ background-color: var(--couleur);
border-radius: var(--x);
height: var(--x);
width: var(--x);
@@ -79,7 +92,7 @@ Code forme anneau :
vertical-align: middle;
}
.rondinterieur {
- background-color: white;
+ background-color: var(--couleurfond);
height: var(--d);
width: var(--d);
/*Centrer horizontalement*/
@@ -93,7 +106,7 @@ Code forme anneau :
display: table;
margin: 0 auto;
/*Définir la couleur*/
- background-color: #FFD100;
+ background-color: var(--couleur);
height: var(--d);
width: var(--d);
border-radius: var(--d);
@@ -105,55 +118,307 @@ Pour résumer, le rond intérieur va se centrer au milieu de l'anneau.
### Version 2
Notre objectif étant de réaliser la figure suivante :
-
+
Ici, nous nous intéressons sur la forme de gauche, car la forme de droite est déhà présenté au dessus.
Code HTML :
```HTML
+
```
Code CSS :
```css
.containform2{
- height: var(--x);
- width: var(--x);
- display: table-cell;
- vertical-align: middle;
- background-color: #FFD100;
+ height: var(--x);
+ width: var(--x);
+ display: table-cell;
+ vertical-align: middle;
+ background-color: var(--couleur);
}
.rond2 {
- display: table;
- margin: 0 auto;
- background-color: white;
- height: var(--d);
- width: var(--d);
- border-radius: var(--d);
+ display: table;
+ margin: 0 auto;
+ background-color: var(--couleurfond);
+ height: var(--d);
+ width: var(--d);
+ border-radius: var(--d);
}
```
### Version 3
Pour la version 3, nous assemblons les idée du dessous de façon à obtenir cette idée :
-
-Il faut alors coder la forme de gauche
+
+Pour différencier chacunes des formes, nous réduisons le diamètre à chaque fois.
+
```HTML
+
+
```
Code CSS :
```css
+:root{
+ /*Valeur à changer en fonction*/
+ --couleur : #FFD100;
+ --couleurfond : white;
+ --x : 6vw;
+ --d : calc(var(--x)/2);
+ --d1 : calc(var(--x)/1.15);
+ --d2 : calc(var(--x)/1,25);
+ --d3 : calc(var(--x)/2,15);
+ --e : calc(var(--x)/4);
+}
+
.anneau2 {
- background-color: white;
- border-radius: var(--x);
- height: var(--x);
- width: var(--x);
+ position: relative;
+ background-color: var(--couleurfond);
+ border-radius: var(--d1);
+ height: var(--d1);
+ width: var(--d1);
+ calc((var(--x) - var(--d1))/2);
+ /*Centrer verticalement les div contenu dans cette div*/
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.anneau3 {
+ position: relative;
+ background-color: var(--couleur);
+ border-radius: var(--d2);
+ height: var(--d2);
+ width: var(--d2);
+ /*Centrer horizontalement*/
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.rond3 {
+ position: relative;
+ top : calc(var(--x) - var(--d2));
+ left : calc(var(--x) - var(--d2));
+ display: table-cell;
+ vertical-align: middle;
+ background-color: var(--couleurfond);
+ height: var(--d);
+ width: var(--d);
+ border-radius: var(--d);
+}
+
+.rond4 {
+ display: table;
+ margin: 0 auto;
+ background-color: var(--couleur);
+ height: var(--d3);
+ width: var(--d3);
+ border-radius: var(--d3);
+}
+```
+
+---
+
+## Etude du carré
+
+Cette structure contient deux formes :
+ - Un carré (composé de 2 carré) qui représente la partie extérieur
+ - Un carré qui représente la partie intérieur manquante
+
+### Version 1
+
+
+
+En HTML pour coder les formes ci-dessus :
+```HTML
+
+
+
+```
+
+Code CSS pour le carré :
+```css
+:root{
+ /*Valeur à changer en fonction*/
+ --couleur : black;
+ --couleurfond : white;
+ --x : 6vw;
+ --d : calc(var(--x)/2);
+ --l : calc(var(--x)/2);
+ --e : calc(var(--x)/4);
+ --d1 : calc(var(--x)/1.15);
+ --d2 : calc(var(--x)/1,25);
+ --d3 : calc(var(--x)/2,15);
+ --basecarre : calc(var(--x)/1.2);
+ --b2 : calc(var(--x)/2);
+}
+
+.carre{
+ position: relative;
+ background-color: var(--couleur);
+ height: var(--basecarre);
+ width: var(--basecarre);
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.carreinterieur{
+ position: relative;
+ top : calc((var(--basecarre) - var(--b2))/2);
+ left : calc((var(--basecarre) - var(--b2))/2);
+ display: table-cell;
+ vertical-align: middle;
+ background-color: var(--couleurfond);
+ height: var(--b2);
+ width: var(--b2);
+}
+
+.carre2 {
+ background-color: var(--couleur);
+ height: var(--b2);
+ width: var(--b2);
+ display: table;
+ margin: 0 auto;
+}
+
+```
+
+### Version 2
+
+
+
+En HTML pour coder les formes ci-dessus :
+```HTML
+
+
+```
+
+Code CSS pour le carré :
+```css
+:root{
+ /*Valeur à changer en fonction*/
+ --couleur : black;
+ --couleurfond : white;
+ --x : 6vw;
+ --d : calc(var(--x)/2);
+ --l : calc(var(--x)/2);
+ --e : calc(var(--x)/4);
+ --d1 : calc(var(--x)/1.15);
+ --d2 : calc(var(--x)/1,25);
+ --d3 : calc(var(--x)/2,15);
+ --basecarre : calc(var(--x)/1.2);
+ --b2 : calc(var(--x)/2);
+}
+
+.carreinterieur2 {
+ background-color: var(--couleurfond);
+ height: var(--b2);
+ width: var(--b2);
+ display: table;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+```
+
+### Version 3
+
+
+
+En HTML pour coder les formes ci-dessus :
+```HTML
+
+
+
+```
+
+Code CSS pour le carré :
+```css
+:root{
+ /*Valeur à changer en fonction*/
+ --couleur : black;
+ --couleurfond : white;
+ --x : 6vw;
+ --d : calc(var(--x)/2);
+ --l : calc(var(--x)/2);
+ --e : calc(var(--x)/4);
+ --d1 : calc(var(--x)/1.15);
+ --d2 : calc(var(--x)/1,25);
+ --d3 : calc(var(--x)/2,15);
+ --basecarre : calc(var(--x)/1.2);
+ --b2 : calc(var(--x)/2);
+ --b3 : calc(var(--x)/1.3);
+ --b4 : calc(var(--x)/2.4);
+}
+
+.carreinterieur3 {
+ position: relative;
+ background-color: var(--couleurfond);
+ height: var(--basecarre);
+ width: var(--basecarre);
+ left : calc((var(--x) - var(--basecarre))/2);
display: table-cell;
vertical-align: middle;
}
+
+.carrev2 {
+ position: relative;
+ background-color: var(--couleur);
+ height: var(--b3);
+ width: var(--b3);
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.carreinterieur4 {
+ position : relative;
+ top : calc((var(--x) - var(--basecarre)) / 1.3);
+ left : calc((var(--x) - var(--basecarre)) / 1.3);
+ background-color: var(--couleurfond);
+ height: var(--d);
+ width: var(--d);
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.carre3 {
+ background-color: var(--couleur);
+ height: var(--b4);
+ width: var(--b4);
+ display: table;
+ margin: 0 auto;
+}
```
+---
+## Etude du triangle
-Pour résumer, nous avons 2 container différents, 2 anneaux différents et deux rond différents. Une version transparente et une version avec une couleur pleine.
+### Version 1