# Titre activité

## Objectifs

### Objectifs pédagogiques

- **Objectif** : Description

### Objectifs techniques

- **Objectif** : Description

## Validation

### Livrables

- Le code final 
- Le compte-rendu de l'activité

Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM2_Prenom2`.
- Le compte rendu peut-être livré au format Markdown ou PDF. 
- Si vous choisissez le Markdown, attention à bien livrer les éventuelles images et à la validité des lien

### Résultats attendus

- [ ] Le programme se lance sans erreur.
- [ ] Chaque fonction contient une docstring minimale expliquant sa fonctionnalité. Bonus : Doctsrings complètes au format Numpy.
- [ ] Le code est propre, correctement formaté, les variables, fonctions et paramètres sont bien nommés, les conventions sont respectées.

### Critères d'évaluation

- 50% Technique (10pts)
    - Code fonctionnel
    - Réponses dans le compte-rendu
    - Questions orale et compréhension générale
    - Connaissance du cours
- 50% Professionnalisme (10pts)
    - Posture professionnelle durant l'activité (3pts)
    - Qualité du rendu (Compte rendu - Documentation - Code) (3pts)
    - Respect des délais/horaires (2pts)
    - Autonomie dans la progression (2pts)
- Bonus +2pts

## Documents fournis

- Cours
- Docs
- Code préalable

## Étapes

### 3 - Un peu de style

**Objectif :** Ajouter une feuille de style

```admonish travail
1. Créer un nouveau fichier nommé `style.css` dans votre projet
2. Ajouter le contenu suivant dans le fichier :
    ~~~css
    h1 {
        color: blue; 
    }
    ~~~
3. Ajouter la ligne suivante dans la section `head` de votre fichier `index.html`
    ~~~html
    <link rel="stylesheet" href="style.css">
    ~~~
4. Vérifier que le titre de votre site s'affiche désormais en bleu
5. Faire un nouveau commit (après avoir complété votre compte-rendu).
```

```admonish note title="Dans le compte rendu"
1. Que fait la ligne `<link rel="stylesheet" href="style.css">` ?
1. Pourquoi on ajoute cette ligne dans la section `<head>` ?
1. Expliquer ce qu'est une feuille de style à l'aide de la [documentation](https://developer.mozilla.org/fr/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content).
2. Dans l'exemple de `style.css`, dites quel élément est :
    - le sélecteur
    - la propriété
    - la valeur de propriété
3. En CSS, expliquer ce que sont 
    - les sélecteurs, 
    - les propriétés 
    - les valeurs de propriétés
```

### 4 - Un peu de créativité

**Objectif :** Compléter le style de votre site web avec la feuille de style CSS

```admonish travail
1. Utilisez la [documentation](https://developer.mozilla.org/fr/docs/Web/CSS/text-align) pour centrer le titre de votre page
1. Ajoutez l'attribut `id="devise"` au paragraphe de la devise du cabinet.
1. Utilisez cet attribut dans un sélecteur CSS pour centrer la phrase sous le titre et mettre le texte en italique (propriété `font-style`). Aidez-vous de la [documentation](https://developer.mozilla.org/fr/docs/Web/CSS/Reference#s%C3%A9lecteurs).
1. Utilisez la [documentation de Mozilla](https://developer.mozilla.org/fr/docs/Web/CSS/font-family) pour que la police par défaut de votre page soit `Helvetica`
1. Utilisez la documentation pour que le lien sur `Alexandrie` devienne vert que lorsqu'on le survole avec la souris. Il doit rester noir sinon.
1. Encapsulez le texte de description ainsi que l'image dans une balise `<section>`. Ajoutez l'attribut `class="description"` à la section.
1. À l'aide des propriétés CSS [`margin-right`](https://developer.mozilla.org/fr/docs/Web/CSS/margin) `margin-left` et [`max-width`](https://developer.mozilla.org/fr/docs/Web/CSS/max-width.), essayez de :
    - centrer le contenu de votre page 
    - limiter le contenu à 800 pixels de large.
1. Faites un nouveau commit (après avoir complété votre compte-rendu).
```

```admonish help title="Aide"
- Pour selectionner un élément lorsqu'il est survolé, vous pouvez utiliser la pseudo-classe `element:hover`
```

```admonish note title="Dans le compte rendu"
1. Expliquez comment selectionner
    - par type d'élément
    - par classe
    - par id
    - quand on survole avec la souris
2. Expliquez les propriétés que vous avez utilisées (donnez leur nom et leur rôle)
3. Expliquez la différence entre la taille en `rem` et en `px`. Pour un site qui s'adapte aux préférences des utilisateurs, quelle notation allez-vous préférer ?
```


## Pour aller plus loin

### Bonus facile - titre

**Objectif**:

```admonish travail
```


### Bonus difficile - titre

**Objectif** :

```admonish travail
```

```admonish help title="Aide"
```

```admonish note title="Dans le compte rendu"
```

### Ressources
