reprise repo github

.gitignore

+.DS_Store
+node_modules
+*.zip
\ No newline at end of file

README.md

-TP1
+# TP 1 - Premiers pas
\ No newline at end of file
+
+## Objectifs
+- Mettre en place son environnement de développement
+- prendre en main les outils de debug (devtools)
+- manipuler les types et fonctions de base de JavaScript
+- et en profiter pour poser les bases de l'application ***"Pizzaland"*** 🍕 que nous développerons tout au long des différents TPs
+
+## Préparatifs
+1. **Créer un dossier pour ce TP et y placer le contenu du dossier de démarrage fourni dans ce repo.**
+2. **Lancer un serveur http dans le dossier créé** :
+	```bash
+	cd /chemin/vers/votre/dossier/demarrage
+	python3 -m http.server 8000
+	```
+	python se met alors en attente d'une connexion http et affiche une ligne du type :
+	```bash
+	Serving HTTP on 0.0.0.0 port 8000 ...
+	```
+
+	**NB:** *Si vous utilisez votre propre machine et que vous ne disposez pas de python3, vous pouvez installer un serveur http comme [XAMPP](https://www.apachefriends.org/fr/index.html), placer vos fichiers le dossier `htdocs` du répertoire d'installation puis tester votre page sur http://localhost.*
+3. **Vérifier dans le navigateur que la page index.html fournie s'affiche correctement** en ouvrant l'url http://localhost:8000. Le résultat attendu est le suivant : <br><a href="images/readme/pizzaland-00.jpg"><img src="images/readme/pizzaland-00.jpg" width="80%"></a>
+
+	*Si la page ne s'affiche pas correctement, vérifiez que vous avez bien lancé python dans le dossier de démarrage, c'est à dire celui où se trouve le fichier `index.html`.*
+4. **Installer un éditeur de code optimisé pour le développement web et particulièrement le JS moderne**. Je vous recommande notamment [Visual Studio Code](https://code.visualstudio.com/) (vscode). C'est un éditeur de code opensource et développé avec [Electron](https://electronjs.org/), c'est donc un outil qui est lui-même développé en JS !
+
+	Pour l'installer sur Linux en mode portable (sans les droits d'admin) téléchargez la version .targz [ici](https://code.visualstudio.com/docs/?dv=linux64), décompressez la dans le dossier de votre choix, puis créez un sous-dossier nommé `"data"` dans le répertoire de vscode. Lancer enfin l'exécutable "code".
+	<br>Il ne reste plus qu'à ouvrir le dossier du projet en le glissant dans la fenêtre de vscode.
+
+	**Raccourcis clavier utiles :**
+	- <kbd>CTRL</kbd>+<kbd>P</kbd> : ouvrir un fichier à partir de son nom
+	- <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd> : lancer n'importe quelle commande des menus.
+	- <kbd>CTRL</kbd>+<kbd>/</kbd> : commenter/décommenter
+	- cheat sheet linux : https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf
+
+## A. Intégration du JS dans la page
+
+1. **Inclure le fichier `main.js` dans le fichier `index.html`** à l'aide d'une balise `<script>`. (*Pour ouvrir le fichier dans vscode, utilisez le raccourci* <kbd>CTRL</kbd>+<kbd>P</kbd>)<br>
+
+	Comme vu pendant le cours il existe plusieurs manières d'intégrer du code JavaScript dans une page HTML :
+	- *en "inline"* c'est à dire directement dans les attributs d'une balise. Dans l'exemple ci-dessous le code JS s'exécutera lorsque l'utilisateur cliquera sur le lien :
+		```html
+		<a href="#" onclick="alert('Welcome to Westeros');return false;">
+			GOT
+		</a>
+		```
+	- dans une balise `<script>`. Le code s'exécute alors au chargement de la page, au moment où le navigateur arrive à cette ligne (le navigateur parse le document html de haut en bas):
+		```html
+		<script>alert('Bienvenue à Westeros');</script>
+		```
+	- dans une balise `<script>` avec un attribut `src`. Dans ce cas le code JS peut alors être externalisé dans un fichier distinct. Le code s'exécute lorsque le fichier est chargé :
+		```html
+		<script src="westeros.js"></script>
+		```
+	C'est cette dernière technique que nous emploierons car elle permet de bien séparer les responsabilités de notre appli (HTML et JS séparés).
+
+	**Attention :** Pour éviter que le chargement du fichier JS ne bloque le chargement de la page HTML (comportement par défaut), il existe 2 solutions :
+	- placer la balise `<script>` en toute fin de fichier html, juste **avant** la balise fermante `</body>`
+	- placer la balise `<script>` dans le `<head>` du fichier, mais y ajouter un attribut **`defer`** (cf. [doc](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer))
+	C'est cette dernière solution que je préconise car elle présente l'avantage de ne pas mélanger le contenu du document (le `<body>`) avec des informations annexes comme le chargement de scripts JS (qui relèvent plutôt du `<head>`) par ailleurs le support navigateur est très bon (IE10, Android 3+, iOS 5+, etc.) cf. https://caniuse.com/#feat=script-defer :
+
+2. **Testez la page pour vérifier que le js est correctement chargé** : Ouvrir les outils de développement de votre navigateur (touche <kbd>F12</kbd> sur Chrome) et ouvrir le panneau "Console".
+<br>Si le fichier `main.js` est correctement chargé, le texte 'welcome to PizzaLand 🍕 !' doit s'afficher dans la console. En effet, le fichier main.js contient l'instruction
+	```js
+	console.log('Welcome to PizzaLand 🍕 !');
+	```
+
+	Cette instruction `console.log()` permet d'afficher du texte ou des variables dans la console.
+
+**NB :** _Si le texte ne s'affiche pas, c'est probablement que le fichier `main.js` n'est pas correctement intégré dans la page html. <br>Ouvrir le panneau "Network"/"Réseau" des devtools puis recharger la page en désactivant le cache navigateur : touche <kbd>CTRL</kbd>+<kbd>F5</kbd>, ou <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>R</kbd> selon les navigateurs. S'assurer que cette fois le fichier `main.js` figure bien dans la liste des fichiers téléchargés. Si ce n'est toujours pas le cas, c'est que votre balise `<script>` n'est pas correcte (vérifiez le chemin vers le fichier)._
+
+**_Pour la suite du TP, tout le code se fera dans ce fichier `main.js`, le fichier html ne devra pas être modifié !_**
+
+## B. Les devtools
+
+***Lorsque l'on développe en JS, les outils de debug dont on dispose nous sont fournis par le navigateur. Tous les navigateurs (même Internet Explorer...) disposent d'outils de développement. Sur Chrome, pour les afficher c'est donc, comme vu plus haut, la touche <kbd>F12</kbd>. On peut également les afficher en faisant un clic droit dans la page et en cliquant sur "Inspecter l'élément".***
+
+**Pendant les TP gardez <u>toujours</u> les outils de développement (et notamment la console) ouverts, ça vous sauvera la vie.**
+
+### B.1. devtools : La console
+La console sert à afficher les instructions `console.log()` mais aussi les erreurs éventuelles dans votre code (vous me direz que ce n'est pas la peine, que vous ne faites jamais d'erreur, mais on sait tous les deux que c'est un mensonge, *"n'est-ce pas ?"*).
+
+<img src="images/devtools-console.jpg" width="80%">
+
+La méthode `console.log()` peut recevoir plusieurs paramètres, ils seront dans ce cas affichés les un après les autres, séparés par un espace. Remplacer le `console.log(...);` du `main.js` par :
+```js
+console.log('Welcome to ', {title:'PizzaLand', emoji: '🍕'});
+```
+
+L'objet `console` est un objet global qui contient la méthode `.log()` mais aussi d'autres méthodes qui permettent d'avoir un rendu différent et de filtrer les messages. Essayez les méthodes suivantes et constatez le résultat dans la console :
+- console.warn()
+- console.error()
+- console.clear()
+
+Enfin, la console permet de tester rapidement du code JS grâce à un champ de saisie. Tapez-y l'instruction `42+"12"-10` puis tapez <kbd>Entrée</kbd>. Incroyable !
+
+### B.2. devtools : l'inspecteur d'éléments
+
+L'inspecteur d'éléments permet de consulter ET de manipuler le code HTML et CSS de la page.
+
+<img src="images/devtools-inspecteur.jpg" width="80%">
+
+Il sera utile pour vérifier que le code HTML que va générer votre JS correspond bien à ce qui est attendu.
+
+### B.3. devtoools : l'onglet Sources
+L'onglet sources permet d'inspecter le code JavaScript de la page, de placer des breakpoints et de stopper l'exécution du code quand une erreur survient. Quand l'exécution du JS est stoppée, on peut consulter les valeurs des variables locales et globales, de voir la call-stack, etc.
+
+C'est probablement l'onglet des devtools le plus important lorsqu'on développe en JavaScript.
+
+<img src="images/devtools-sources.jpg" width="80%">
+
+Pour l'utiliser, remplacez le contenu de votre fichier `main.js` en ajoutant le code suivant :
+```js
+let what = 'door';
+console.log('Hold', 'the', what );
+```
+Rechargez la page, dans l'onglet "Sources" sélectionnez le fichier main.js (dans le panneau de gauche), puis cliquez sur le numéro de la 2e ligne. Une flèche bleue a du s'ajouter ce qui signifie qu'un breakpoint a été ajouté. Comme le code en question s'est déjà exécuté (puisque notre JS se lance au chargement de la page), rechargez la page pour que le breakpoint se déclenche.
+
+Une fois la page rechargée, l'exécution est interrompue, et il est possible de voir à droite, dans l'onglet "Scope" les valeurs des variables locales et notamment de la variable `what`. Vous pouvez aussi consulter la valeur des variables au survol de la variable directement dans le code !
+
+Pour reprendre l'exécution de la page, cliquez sur le bouton play bleu, puis re-cliquez sur le numéro de la 2e ligne pour enlever le breakpoint.
+
+## C. Note à propos d'EcmaScript
+
+### Pour tous les TP vous coderez en ES6+ !
+
+**Dans un premier temps, pour se familiariser avec JavaScript, nous ne nous soucierons pas du support navigateur des syntaxes EcmaScript que l'on va utiliser. Ce que vous pourrez utiliser ou pas dépend de la version de votre navigateur.**
+
+Consultez le support navigateur des différentes fonctionnalités EcmaScript ici :
+
+- pour ES6 : http://kangax.github.io/compat-table/es6/
+- pour ES7, ES8, ES9 (ES2016+) : http://kangax.github.io/compat-table/es2016plus/
+- pour les features en cours de spécification (comme les propriétés de classes, ou le mot clé `static`) : http://kangax.github.io/compat-table/esnext/
+
+Ceci étant dit, tout ce qui a été vu en cours jusqu'ici est compatible avec les dernières versions de Chrome/Chromium !
+
+**NB :** *Dans la vraie vie se reposer sur la version du navigateur de l'utilisateur est trop "risqué", on utilisera donc par la suite le compilateur [Babel](https://babeljs.io) pour rendre notre code compatible avec tous les navigateurs. Pour l'instant on va mettre de côté cette problématique pour ce concentrer sur le code, nous y reviendrons dans la suite du TP.*
+
+
+
+### D. Manipulation des chaînes
+***Pour rappel il existe 3 manières de déclarer des chaines de caractères en JS :***
+```js
+/* guillemets simples */
+let s1 = 'je suis une chaîne avec des single quotes';
+
+/* ou guillemets doubles */
+let s2 = "je suis une chaîne avec des double quotes";
+
+/* ou accent grave (template strings ES6) */
+let s3 = `Les étudiants de ${ getCurrentSchool() } sont les meilleurs`;
+```
+*Les templates strings sont à privilégier si vous devez injecter des valeurs dynamiques dans la chaîne ou si vous souhaitez la déclarer sur plusieurs ligne.*
+*<br><br>Si ce n'est pas le cas, le choix entre guillemets simples ou double est une question de préférences (les goûts et les couleurs...), la seule contrainte est qu'une fois qu'on a fait un choix, il faut s'y tenir (conventions de code). Entre guillemets doubles ou simples, ma préférence va aux guillemets simples qui évitent de devoir échapper les double quotes souvent utilisées lorsqu'on génère du code HTML.*
+
+**Entrons dans le vif du sujet :**
+
+1. **Effacer le code contenu dans le fichier `main.js`** pour repartir d'un fichier vide.
+2. **Créer une constante appelée `nom`** et y assigner la chaine de caractères `Regina`
+3. **Créer une constante nommée `url`.** Sa valeur initiale sera la concaténation de :
+   - la chaine de caractères `'images/'`,
+   - la valeur de la variable `nom` transformée en minuscules à l'aide de la méthode `.toLowerCase()` cf. [doc](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
+   - et de la chaîne de caractères `'.jpg'`
+4. **Sur la ligne suivante, créer une variable nommée `html`** :
+
+	Votre code devra permettre d'assigner à la variable `html` une chaîne qui corresponde au code d'une balise `<a>` (*lien hypertexte*) :
+	- L'URL du lien (*attribut `href`*) devra correspondre à la valeur la constante `url`.
+	- Le contenu de la balise `<a>` correspondra lui aussi à la valeur de la constante `url`
+
+	***NB:** pour ça, les template strings sont parfaitement adaptées !*
+
+	Afficher dans la console la valeur de la variable html, elle doit correspondre au code suivant :
+   ```html
+   <a href="images/regina.jpg">images/regina.jpg</a>
+   ```
+
+5. **C'est le moment d'afficher le contenu de la variable `html` dans la page.**
+
+   Même si nous n'avons pas encore vu comment manipuler la page html grâce à l'API DOM (chapitre 3), vous trouverez ci-dessous le code qui va permettre d'injecter notre balise `<a>` dans la page. A la fin de votre code, ajouter l'instruction suivante :
+   ```js
+   document.querySelector(".pizzasContainer").innerHTML = html;
+   ```
+   Cette instruction va avoir pour effet d'injecter le code HTML contenu dans la variable `html` à l'intérieur de la balise de classe CSS `"pizzasContainer"`.
+
+   Si tout s'est bien passé, vous devriez désormais :
+   - voir le texte 'images/regina.jpg' dans la page de votre navigateur.
+   - pouvoir cliquer sur ce texte et être redirigé vers une image de pizza !
+
+   <a href="images/readme/pizzaland-01.jpg"><img src="images/readme/pizzaland-01.jpg" width="80%"></a>
+
+6. **Modifier encore la variable html avant son affichage** en remplaçant le texte contenu dans la balise `<a>` par
+	- **une balise `<img>`** dont la source (_attribut `src`_) sera la chaîne `images/regina.jpg` valeur initiale de la variable `html`.
+	- **une balise `<h4>`** contenant le `nom` de la pizza
+
+	Contrôlez dans l'inspecteur d'éléments que le résultat obtenu est bien :
+	```html
+	<a href="images/regina.jpg">
+		<img src="images/regina.jpg"/>
+		<h4>Regina</h4>
+	</a>
+	```
+
+	Le rendu doit être celui-ci :<br>
+	<a href="images/readme/pizzaland-02.jpg"><img src="images/readme/pizzaland-02.jpg" width="80%"></a>
+
+### E. Intégration de Babel
+Pour installer Babel et compiler votre code ES6+ en ES5, il vous faut Node.JS ce qui nous permettra d'utiliser npm (Node Package Manager - l'outil qui permet de télécharger des utilitaires JS).
+
+Tapez dans un terminal les instructions suivantes :
+1. **Configurez le proxy :**
+	```bash
+	npm config set proxy http://cache.univ-lille1.fr:3128
+	```
+2. **Initialisez votre projet npm :**
+	```bash
+	cd /chemin/vers/votre/dossier/demarrage
+	npm init
+	```
+	Répondez alors aux questions qui vous sont posées pour créer votre projet npm. A la fin du questionnaire vous verrez qu'un fichier package.json a été créé. Celui-ci nous sera utile par la suite.
+3. **Installez babel :**
+   ```bash
+	npm install --save-dev @babel/core @babel/cli
+	```
+	Vous noterez que @babel/core et @babel/cli ont été rajoutés dans les dépendances du fichier `package.json` !
+4. **Installer le preset `env` qui permettra de transpiler les features ES6+ en ES5** (on peut voir le preset "env" comme un dictionnaire de traduction ES6+ -> ES5) :
+	```bash
+	npm install --save-dev @babel/preset-env
+	```
+5. **Puis créer un fichier `.babelrc`** à la racine de votre projet et configurer Babel avec le preset `env` :
+	```json
+	{
+		"presets": ["@babel/env"]
+	}
+	```
+6. **Vous pouvez maintenant compiler votre code ES6+ en ES5** à l'aide de la commande :
+	```bash
+	./node_modules/.bin/babel js -d build
+	```
+	Cette commande va créer un dossier `build` dans lequel sera placé le fichier main.js compilé !
+
+	Vérifiez que le fichier build/main.js est bien compilé et qu'il ne reste plus de traces de code ES6 (const, let, ...). Si ce n'est pas le cas, c'est que le .babelrc est mal configuré ou que vous avez raté une étape !
+
+7. **Une fois le fichier `build/main.js` créé, modifiez le fichier index.html pour charger ce fichier à la place du `js/main.js`. Rechargez la page pour vérifier que tout fonctionne toujours correctement !**
+
+8. **Pour simplifier le travail et éviter d'avoir à compiler manuellement à chaque modification**, utilisez la commande suivante qui va tourner en tâche de fond et recompiler à chaque sauvegarde du fichier js/main.js :
+	```bash
+	./node_modules/.bin/babel js -d build --verbose --watch --source-maps
+	```
+
+### F. Manipulation des tableaux
+
+Initialiser un tableau nommé `data` avec 3 chaines de caractères : 'Regina', 'Napolitaine', 'Spicy'. Parcourir ce tableau afin de générer 3 liens sur le modèle de celui réalisé plus haut.
+
+Utilisez les différentes méthodes de parcours des tableaux :
+1. Une boucle `for` classique
+2. La méthode `Array.forEach` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach
+3. la méthode `Array.map` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map accompagnée de la méthode `Array.join` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/join
+
+Le résultat obtenu sera identique dans les 3 cas :
+<a href="images/readme/pizzaland-03.jpg"><img src="images/readme/pizzaland-03.jpg" width="80%"></a>
+
+## G. Les Objets littéraux
+Modifier le tableau `data` : au lieu de 3 chaînes de caractères, on va maintenant y mettre 3 objets littéraux de la forme suivante :
+```js
+{
+	nom: 'Regina',
+	base: 'tomate',
+	prix_petite: 5.5,
+	prix_grande: 7.5
+}
+```
+
+Modifier la boucle pour générer un code de ce type :
+```html
+<article class="media">
+	<a href="images/regina.jpg">
+		<img src="images/regina.jpg" />
+		<section class="infos">
+			<h4>Regina</h4>
+			<ul>
+				<li>Prix petit format : 5.50 €</li>
+				<li>Prix grand format : 7.50 €</li>
+			</ul>
+		</section>
+	</a>
+</article>
+```
+
+Le rendu final devra correspondre à ceci :
+
+<a href="images/readme/pizzaland-04.jpg"><img src="images/readme/pizzaland-04.jpg" width="90%"></a>

css/main.css

+html {
+	height: 100%;
+}
+body {
+	background: #f1f1f1;
+	padding-bottom: 50px;
+	position: relative;
+	min-height: 100%;
+}
+@media (min-width: 200px) {
+	.navbar-header{
+		float: left;
+	}
+	.navbar-right {
+		float: right !important;
+		margin-right: -15px;
+	}
+	.navbar-nav > li {
+		float: left;
+	}
+	.navbar-nav > li > a {
+		padding-top: 19.5px;
+		padding-bottom: 19.5px;
+	}
+	.navbar-nav {
+		margin:0;
+	}
+}
+#appContainer {
+	padding-top: 80px;
+}
+.row.marketing {
+	margin: 0 auto;
+	max-width: 900px;
+}
+.video-detail, .media-list {
+	background: #fff;
+	padding-top: 20px 0;
+	box-shadow: 0 1px 2px rgba(0,0,0,.1);
+}
+.video-detail {
+	padding: 20px;
+}
+.media, .pizzasContainer > a {
+	padding: 20px;
+	border-bottom: 1px solid rgba(0,0,0,.1);
+	margin: 0;
+	display: flex;
+}
+.media .infos, .pizzasContainer > a .infos {
+	display: flex;
+	flex-direction: column;
+}
+.media a {
+	display: flex;
+}
+.media p {
+	font-size: 12px;
+}
+.media img, .pizzasContainer > a img {
+	margin-right: 20px;
+	width: 246px;
+	height: 138px;
+}
+.media h4 .pizzasContainer > a h4 {
+	font-size: 25px;
+	margin: 0;
+}
+a, a:hover {
+	color: #333;
+}
+a h4, a:hover h4 {
+	color: #167ac6;
+}
+.comments .panel {
+	margin: 5px 0;
+}
+.navbar-inverse {
+	background: #fff;
+	box-shadow: 0 1px 2px rgba(0,0,0,.1);
+	/*position: relative;
+	color: black;
+}
+.navbar-inverse:after {
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 2px;*/
+	background-color: #cd1a1a;
+	background-image: linear-gradient(45deg, #cd1a1a, #cb1a70);
+}
+.navbar-inverse .navbar-nav > li > a,
+.navbar-inverse .navbar-nav > li > a:focus {
+	color: #f9d2d2;
+}
+.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
+	background-color: #b01717;
+}
+.navbar-inverse .navbar-nav > li > a:hover {
+	color: #fff;
+	background-color: #b01717;
+}
+.navbar-brand {
+	padding: 0 15px;
+	display: flex;
+	align-items: center;
+}
+.navbar-brand > img {
+	display: inline-block;
+	height: 50px;
+	margin-right: 10px;
+}
+.navbar-brand > small {
+	font-size: 12px;
+	font-style: italic;
+	margin-left:10px;
+	margin-top:5px;
+}
+footer {
+	position: absolute;
+	bottom: 10px;
+	right: 10px;
+	font-size: 10px;
+	color: #0003;
+}
+footer a{
+	color: #0006;
+}
+form {
+	display:flex;
+	padding: 20px;
+	flex-direction: column;
+}
+form label {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: baseline;
+}
+form label input,
+form label select,
+form label .form-control {
+	width: 70%;
+}
\ No newline at end of file

images/logo.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="291px" height="216px" viewBox="-0.362 -0.521 291 216" enable-background="new -0.362 -0.521 291 216"
+	 xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<g>
+		<path fill="#E2952D" d="M113.373,17.37c-42.7,17.738-77.862,52.387-95.162,97.926l161.259,61.492L113.373,17.37z"/>
+		
+			<path fill="none" stroke="#E2952D" stroke-width="17.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M113.373,17.37c-42.7,17.738-77.862,52.387-95.162,97.926l161.259,61.492L113.373,17.37z"/>
+		<path fill="#E2952D" d="M111.113,10.579C65.813,29.397,28.51,66.153,10.155,114.47"/>
+		
+			<path fill="none" stroke="#EDAD4A" stroke-width="20.311" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M111.113,10.579C65.813,29.397,28.51,66.153,10.155,114.47"/>
+	</g>
+	<g>
+		<defs>
+			<path id="SVGID_3_" d="M18.211,115.296l161.258,61.492L113.373,17.37C70.673,35.108,35.511,69.758,18.211,115.296"/>
+		</defs>
+		<clipPath id="SVGID_5_">
+			<use xlink:href="#SVGID_3_"  overflow="visible"/>
+		</clipPath>
+		<path clip-path="url(#SVGID_5_)" fill="#D34030" d="M52.142,145.604c0,0-17.362-30.51,4.285-41.908
+			C78.072,92.3,78.285,97.612,86.55,83.335c8.265-14.279,7.185-33.295,27.62-33.475c20.435-0.178,46.596-17.166,47.163-20.131
+			c0.569-2.967,47.681,181.818,47.681,181.818L52.142,145.604z"/>
+		
+			<path clip-path="url(#SVGID_5_)" fill="none" stroke="#D34030" stroke-width="7.792" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M52.142,145.604c0,0-17.362-30.51,4.285-41.908C78.072,92.3,78.285,97.612,86.55,83.335c8.265-14.279,7.185-33.295,27.62-33.475
+			c20.435-0.178,46.596-17.166,47.163-20.131c0.569-2.967,47.681,181.818,47.681,181.818L52.142,145.604z"/>
+		<path clip-path="url(#SVGID_5_)" fill="#B93229" d="M134.009,127.792c4.47,0,8.095,3.623,8.095,8.096
+			c0,4.471-3.625,8.094-8.095,8.094s-8.094-3.623-8.094-8.094C125.915,131.415,129.539,127.792,134.009,127.792"/>
+		<path clip-path="url(#SVGID_5_)" fill="#B93229" d="M82.425,99.731c7.421,0,13.434,6.014,13.434,13.437
+			c0,7.419-6.013,13.435-13.434,13.435c-7.42,0-13.436-6.016-13.436-13.435C68.989,105.745,75.005,99.731,82.425,99.731"/>
+		<g opacity="0.7" clip-path="url(#SVGID_5_)">
+			<g>
+				<defs>
+					<rect id="SVGID_4_" x="107.439" y="83.032" width="26.87" height="26.871"/>
+				</defs>
+				<clipPath id="SVGID_6_">
+					<use xlink:href="#SVGID_4_"  overflow="visible"/>
+				</clipPath>
+				<path clip-path="url(#SVGID_6_)" fill="#B93229" d="M120.875,83.032c7.42,0,13.434,6.016,13.434,13.436
+					s-6.014,13.436-13.434,13.436c-7.421,0-13.436-6.016-13.436-13.436S113.455,83.032,120.875,83.032"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		
+			<path fill="none" stroke="#353534" stroke-width="5.257" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M62.15,121.151c-2.963-2.924-2.996-7.695-0.072-10.656c2.924-2.965,7.695-2.994,10.658-0.07"/>
+		
+			<path fill="none" stroke="#353534" stroke-width="5.257" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M108.673,74.005c-2.962-2.924-2.993-7.695-0.07-10.658c2.923-2.963,7.694-2.992,10.658-0.068"/>
+		
+			<path fill="none" stroke="#353534" stroke-width="5.257" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M109.719,100.39c2.961,2.924,2.994,7.695,0.07,10.656c-2.923,2.965-7.695,2.992-10.658,0.07"/>
+		<path fill="#EDAD4A" d="M273.304,113.372c-17.738-42.699-52.385-77.861-97.925-95.162l-61.493,161.262L273.304,113.372z"/>
+		
+			<path fill="none" stroke="#EDAD4A" stroke-width="17.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M273.304,113.372c-17.738-42.699-52.385-77.861-97.925-95.162l-61.493,161.262L273.304,113.372z"/>
+		<path fill="#EDAD4A" d="M280.095,111.114C261.278,65.812,224.52,28.51,176.205,10.155"/>
+		
+			<path fill="none" stroke="#E2952D" stroke-width="20.311" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M280.095,111.114C261.278,65.812,224.52,28.51,176.205,10.155"/>
+	</g>
+	<g>
+		<defs>
+			<path id="SVGID_2_" d="M113.885,179.472l159.419-66.1c-17.738-42.699-52.385-77.861-97.925-95.162L113.885,179.472z"/>
+		</defs>
+		<clipPath id="SVGID_7_">
+			<use xlink:href="#SVGID_2_"  overflow="visible"/>
+		</clipPath>
+		<path clip-path="url(#SVGID_7_)" fill="#D34030" d="M145.07,52.14c0,0,30.509-17.361,41.907,4.285
+			c11.399,21.646,6.085,21.86,20.364,30.125c14.278,8.264,33.294,7.184,33.474,27.621c0.179,20.434,17.166,46.594,20.131,47.164
+			c2.967,0.566-181.819,47.678-181.819,47.678L145.07,52.14z"/>
+		
+			<path clip-path="url(#SVGID_7_)" fill="none" stroke="#D34030" stroke-width="7.792" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M145.07,52.14c0,0,30.509-17.361,41.907,4.285c11.399,21.646,6.085,21.86,20.364,30.125c14.278,8.264,33.294,7.184,33.474,27.621
+			c0.179,20.434,17.166,46.594,20.131,47.164c2.967,0.566-181.819,47.678-181.819,47.678L145.07,52.14z"/>
+	</g>
+	<g>
+		<path fill="#B93229" d="M161.58,136.831c0,4.469-3.623,8.092-8.093,8.092c-4.47,0-8.095-3.623-8.095-8.092
+			c0-4.473,3.625-8.098,8.095-8.098C157.957,128.733,161.58,132.358,161.58,136.831"/>
+		<path fill="#B93229" d="M189.641,85.245c0,7.42-6.015,13.434-13.436,13.434c-7.42,0-13.434-6.014-13.434-13.434
+			c0-7.422,6.014-13.436,13.434-13.436C183.626,71.81,189.641,77.823,189.641,85.245"/>
+		<g opacity="0.7">
+			<g>
+				<defs>
+					<rect id="SVGID_1_" x="179.47" y="110.261" width="26.87" height="26.869"/>
+				</defs>
+				<clipPath id="SVGID_8_">
+					<use xlink:href="#SVGID_1_"  overflow="visible"/>
+				</clipPath>
+				<path clip-path="url(#SVGID_8_)" fill="#B93229" d="M206.34,123.694c0,7.422-6.014,13.436-13.435,13.436
+					c-7.42,0-13.436-6.014-13.436-13.436c0-7.42,6.016-13.434,13.436-13.434C200.326,110.261,206.34,116.274,206.34,123.694"/>
+			</g>
+		</g>
+		<path fill="#353534" d="M176.396,77.54c-2.922,2.963-7.695,2.994-10.658,0.07c-2.961-2.922-2.993-7.695-0.069-10.656
+			c2.923-2.963,7.694-2.996,10.656-0.072C179.289,69.806,179.32,74.577,176.396,77.54"/>
+		<path fill="#353534" d="M223.542,124.065c-2.922,2.961-7.695,2.992-10.656,0.068c-2.963-2.923-2.994-7.695-0.071-10.656
+			c2.923-2.963,7.696-2.992,10.659-0.07C226.434,116.331,226.465,121.101,223.542,124.065"/>
+		
+			<path fill="none" stroke="#353534" stroke-width="5.257" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M186.431,114.522c-2.924,2.963-7.696,2.994-10.659,0.07c-2.962-2.922-2.992-7.693-0.07-10.658"/>
+	</g>
+</g>
+</svg>

index.html

+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+	<title>PizzaLand</title>
+
+	<link rel="stylesheet" type="text/css" href="css/flatly-bootstrap.css" />
+	<link rel="stylesheet" type="text/css" href="css/main.css" />
+</head>
+<body>
+	<main id="appContainer">
+		<div class="container">
+			<header>
+				<nav class="navbar navbar-inverse navbar-fixed-top">
+					<div class="container">
+						<div class="navbar-header">
+							<a class="navbar-brand" href="#">
+								<img src="images/logo.svg" /> PizzaLand
+							</a>
+						</div>
+						<ul class="nav navbar-nav navbar-right">
+							<li><a href="#" class="pizzaListButton">La carte</a></li>
+							<li><a href="#" class="pizzaFormButton">Ajouter une Pizza</a></li>
+						</ul>
+					</div>
+				</nav>
+			</header>
+			<section class="row marketing">
+				<div class="col-lg-12">
+					<header class="pageTitle"></header>
+					<section class="media-list pizzasContainer">
+					</section>
+				</div>
+			</section>
+		</div>
+	</main>
+	<footer>
+			Free photos from <a href="https://unsplash.com/unsplash">Unsplash</a>
+			<br>
+			Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" 			    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" 			    title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+	</footer>
+</body>
+</html>
\ No newline at end of file

js/main.js

+console.log('Welcome to PizzaLand 🍕 !');
\ No newline at end of file