# Projet Swish
**Etudes des formes**
> Avec C.TOFFIN, Y.SEVRET, A.GOLFIER, T.SOUCHON et Monsieur LAFOURCADE EN 2A de DUT Info.

---
## SOMMAIRE
   - [Explications](#Explications)
   - [Etude du cercle](#Etude-du-cercle)
   - [Etude du carré](#Etude-du-carré)
   - [Etude du triangle](#Etude-du-triangle)
   - [Etude du losange](#Etude-du-losange)
   - [Etude du pentagone](#Etude-du-pentagone)


---
## Explications

Chaque forme est contenu dans une div carré. Pour simplifier mes calculs, je prends un carré de longueur X qui permet de calculer facilement par la suite, si nous augmentons ou diminuons la taille de la div.

La division étant définie par :
```css
#containform {
    height: var(--x);
    width: var(--x);
    display: table-cell;
    vertical-align: middle;
}

```

---
## Etude du cercle

Cette structure contient deux formes :
   - Un anneau (composé de 2 ronds) qui représente la partie extérieur
   - Un rond qui représente la partie intérieur manquante

En HTML pour coder un rond, nous partons d'une div simple (un quadrilatère) :
```HTML
<div class="rond"></div>
```
Et en CSS nous définissons
```CSS
.rond {
    //centrer la division
    display: table;
    margin: 0 auto;
    //définir la couleur
    background-color: #FFD100;
    //définir la taille
    height: 3vw;
    width: 3vw;
    //définir un arondie à notre div
    border-radius: 3vw;
}
```

### Version 1
Notre objectif étant de réaliser la figure suivante :

![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779749908038156333/unknown.png "Image rond")

Code forme anneau :
```css
:root{
	/*Valeur à changer en fonction*/
  --x : 6vw;
  --d : calc(var(--x_longueur)/2);
  --e : calc(var(--x_longueur)/4);
}

.anneau {
    background-color: #FFD100;
    border-radius: var(--x);
    height: var(--x);
    width: var(--x);
    /*Centrer les éléments intérieurs verticalement*/
    display: table-cell;
    vertical-align: middle;
}
.rondinterieur {
    background-color: white;
    height: var(--d);
    width: var(--d);
    /*Centrer horizontalement*/
    display: table;
    margin: 0 auto;
    /*Faire un arondie*/
    border-radius: var(--d);
}
.rond {
   /*Centrer horizontalement*/
    display: table;
    margin: 0 auto;
    /*Définir la couleur*/
    background-color: #FFD100;
    height: var(--d);
    width: var(--d);
    border-radius: var(--d);
}
```

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 :

![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779754348908642324/unknown.png "Image rond")

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
<div class="containform2">
		<div class="rond2"></div>
</div>
```
Code CSS :
```css
.containform2{
	height: var(--x);
    width: var(--x);
    display: table-cell;
    vertical-align: middle;
    background-color: #FFD100;
}

.rond2 {
	display: table;
    margin: 0 auto;
    background-color: white;
    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 :

![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779759566187003904/unknown.png "Image rond")
Il faut alors coder la forme de gauche
```HTML
<div class="containform2">
  <div class="anneau2"></div>
</div>
```
Code CSS :
```css
.anneau2 {
    background-color: white;
    border-radius: var(--x);
    height: var(--x);
    width: var(--x);
    display: table-cell;
    vertical-align: middle;
}
```

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.