diff --git a/CV.html b/CV.html
new file mode 100755
index 0000000000000000000000000000000000000000..6be4ecb7f6639457587d42e8863d447e853f9fed
--- /dev/null
+++ b/CV.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+ <link rel="stylesheet" type="text/css" href="css/scrollToTop.css"/>
+ <link rel="stylesheet" type="text/css" href="css/header_footer.css"/>
+ <link rel="stylesheet" type="text/css" href="css/CV.css"/>
+ <title>Site de Dimitri DUPARD</title>
+ </head>
+ <body>
+ <header>
+ <h1>Site de présentation de Dimitri DUPARD</h1>
+ <nav id="normal">
+ <ul id="Liens">
+ <li><a href="index.html" id="Index">Accueil</a></li>
+ <li><a href="CV.html" id="CV">CV</a></li>
+ <li><a href="Realisation.html" id="Real">Réalisations</a></li>
+ <li><a href="Contact.html" id="Contact">Contact</a></li>
+ </ul>
+ </nav>
+ <nav class="burger">
+ <a href="#" class="burger__button" id="burger-button">
+ <span class="burger__button__icon"></span>
+ </a>
+ <ul class="burger__menu" id="burger-menu">
+ <li><a href="index.html">Accueil</a></li>
+ <li><a href="CV.html">CV</a></li>
+ <li><a href="Realisation.html">Réalisations</a></li>
+ <li><a href="Contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <a id="TopButton"><img src="img/fleche_haut.png" alt="Image flèche haut"/></a>
+
+ <div id="Curiculum">
+ <div id="Presentation">
+ <img src="img/IMG_20191211_205430.jpg" alt="Photo de moi"/>
+ <div id="Infos">
+ <h2>Dimitri DUPARD</h2>
+ <h3>18 ans</h3>
+ </div>
+ </div>
+ <div id="Corps">
+ <section id="CompInfo">
+ <h3>Compétences Informatiques</h3>
+ <div class="Content">
+ <div id="Programmation">
+ <h4>Programmation</h4>
+ <ul>
+ <li><a href="Realisation.html#C">C(89)</a></li>
+ <li>C++</li>
+ <li>Python</li>
+ </ul>
+ <p>Niveau Général : </p>
+ <div class="FondBarre">
+ <div id="JaugeProg">
+ </div>
+ </div>
+ </div>
+ <div id="Web">
+ <h4>Web / Bases de données</h4>
+ <ul>
+ <li>HTML5</li>
+ <li>CSS3</li>
+ <li>JavaScript</li>
+ <li>PHP</li>
+ <li>MySQL</li>
+ </ul>
+ <p>Niveau Général : </p>
+ <div class="FondBarre">
+ <div id="JaugeWeb">
+ </div>
+ </div>
+ </div>
+ <div id="OS">
+ <h4>Systèmes d'exploitation</h4>
+ <ul>
+ <li>Windows</li>
+ <li>Ubuntu 18.04</li>
+ <li>ArchLinux</li>
+ </ul>
+ <p>Niveau Général : </p>
+ <div class="FondBarre">
+ <div id="JaugeOS">
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="Formation">
+ <h3>Formation</h3>
+ <div class="Content">
+ <div>
+ <h4>1ère année de DUT Informatique</h4>
+ <h5>IUT Sénart-Fontainebleau, Fontainebleau</h5>
+ <h6>2019 - 2020</h6>
+ </div>
+ <div>
+ <h4>Baccalauréat Scientifique option SVT</h4>
+ <h5>Lycée LaSalle Sainte Marie, Saint-Pierre-les-Nemours</h5>
+ <h6>2019</h6>
+ </div>
+ </div>
+ </section>
+ <section id="CompGen">
+ <h3>Compétences générales</h3>
+ <div class="Content">
+ <div id="Word">
+ <h4>Word</h4>
+ <div class="FondBarre">
+ <div id="JaugeWord">
+ </div>
+ </div>
+ </div>
+ <div id="PowerPoint">
+ <h4>PowerPoint</h4>
+ <div class="FondBarre">
+ <div id="JaugePowerPoint">
+ </div>
+ </div>
+ </div>
+ <div id="Excel">
+ <h4>Excel</h4>
+ <div class="FondBarre">
+ <div id="JaugeExcel">
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="Exp">
+ <h3>Stage à l'école Sainte Marie - Nemours</h3>
+ <h6>12 - 23 Juin 2017</h6>
+ <h4>Tâches réalisées :</h4>
+ <ul>
+ <li>Assistance des professeurs de différents niveaux dans l’encadrement des classes et l’apprentissage des élèves</li>
+ <li>Surveillance lors de l’étude et de la garderie</li>
+ </ul>
+ </section>
+ <div id="Autres">
+ <section id="Langues">
+ <h3>Langues</h3>
+ <ul>
+ <li>Anglais : Avancé</li>
+ <li>Espagnol : Intermédiaire</li>
+ </ul>
+ </section>
+ <section id="ActPerso">
+ <h3>Activités et centres d'intérêt personnels</h3>
+ <ul>
+ <li>Rugby en compétition</li>
+ <li>Culture Japonaise</li>
+ <li>Jeux vidéos</li>
+ <li>Photographie</li>
+ <li>Vidéos documentaires</li>
+ </ul>
+ </section>
+ </div>
+ </div>
+
+ <a href="pdf/CV_Dimitri_Dupard.pdf" target="_blank"><img src="img/pdf.png" alt="PDF à télécharger"/></a>
+ </div>
+ <footer>
+ <img src="img/2017_11_27_Logotype-IUT-Senart-Fontainebleau_reserve.png" alt="Logo UPEC"/>
+ <p>
+ Téléphone : 07 66 05 76 33<br/>
+ Adresse mail : dimitri.dupard@yahoo.fr
+ </p>
+ <p>
+ Fait par Dimitri DUPARD<br/>
+ Mis à jour le 14/01/2020
+ </p>
+ </footer>
+ <script src="js/scroll.js"></script>
+ <script src="js/menu.js"></script>
+ </body>
+</html>
diff --git a/Contact.html b/Contact.html
new file mode 100755
index 0000000000000000000000000000000000000000..c37b1238eb9196c418773f52dbc0de8471950a62
--- /dev/null
+++ b/Contact.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+ <link rel="stylesheet" type="text/css" href="css/contact.css"/>
+ <link rel="stylesheet" type="text/css" href="css/header_footer.css"/>
+ <title>Site de Dimitri DUPARD</title>
+ </head>
+ <body>
+ <header>
+ <h1>Site de présentation de Dimitri DUPARD</h1>
+ <nav id="normal">
+ <ul id="Liens">
+ <li><a href="index.html" id="Index">Accueil</a></li>
+ <li><a href="CV.html" id="CV">CV</a></li>
+ <li><a href="Realisation.html" id="Real">Réalisations</a></li>
+ <li><a href="Contact.html" id="Contact">Contact</a></li>
+ </ul>
+ </nav>
+ <nav class="burger">
+ <a href="#" class="burger__button" id="burger-button">
+ <span class="burger__button__icon"></span>
+ </a>
+ <ul class="burger__menu" id="burger-menu">
+ <li><a href="index.html">Accueil</a></li>
+ <li><a href="CV.html">CV</a></li>
+ <li><a href="Realisation.html">Réalisations</a></li>
+ <li><a href="Contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+ <div id="main">
+ <form method="POST" action="php/recup.php">
+ <div id="formulaire">
+ <div class="groupe">
+ <label for="Nom">Nom : </label>
+ <input type="text" name="Nom" id="Nom" required />
+ </div>
+ <div class="groupe">
+ <label for="Prenom">Prénom : </label>
+ <input type="text" name="Prenom" id="Prenom" required />
+ </div>
+ <div class="groupe">
+ <label for="Mail">Adresse mail : </label>
+ <input type="email" name="Mail" id="Mail" required />
+ </div>
+ <div class="groupe">
+ <label for="Tel">Téléphone : </label>
+ <input type="tel" name="Tel" id="Tel" title="Numéro à 10 chiffres sans espaces commençant par 06 ou 07" pattern="0[6-7]( *[0-9]{2}){4}" maxlength="10" required />
+ </div>
+ <div class="groupe">
+ <label for="Fonc">Fonction : </label>
+ <select name="Fonc" id="Fonc" required>
+ <option label="Choisissez votre travail"></option>
+ <option value="Employeur">Employeur</option>
+ <option value="Etudiant">Etudiant</option>
+ <option value="Autre">Autre</option>
+ </select>
+ </div>
+ <div class="groupe" id="Prec">
+ <label for="Precis">Précisez : </label>
+ <input type="text" name="Precis" id="Precis" placeholder="Précisez votre travail" />
+ </div>
+ <div class="groupe">
+ <label for="Message">Message : </label>
+ <textarea name="Message" id="Message" placeholder="Optionel"></textarea>
+ </div>
+
+ <p id="Reponse">Votre requête a bien été transmise</p>
+ <div id="Envoi">
+ <input type="submit" name="valider" value="Envoyer"/>
+ <input type="reset" name="reset" value="Réinitialiser"/>
+ </div>
+ </div>
+ </form>
+ <a href="mailto:dimitri.dupard@yahoo.fr"><img src="img/icone-mail-blanc-png.png" id="logoMail" alt="Image mail" /></a>
+ </div>
+ <footer id="footer">
+ <img src="img/2017_11_27_Logotype-IUT-Senart-Fontainebleau_reserve.png" alt="Logo UPEC"/>
+ <p>
+ Téléphone : 07 66 05 76 33<br/>
+ Adresse mail : dimitri.dupard@yahoo.fr
+ </p>
+ <p>
+ Fait par Dimitri DUPARD<br/>
+ Mis à jour le 14/01/2020
+ </p>
+ </footer>
+ <script src="js/requete.js"></script>
+ <script src="js/menu.js"></script>
+ </body>
+</html>
diff --git a/Realisation.html b/Realisation.html
new file mode 100644
index 0000000000000000000000000000000000000000..8c58f6cf52503becb421a10f1496695ad59c17f4
--- /dev/null
+++ b/Realisation.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+ <link rel="stylesheet" type="text/css" href="css/real.css"/>
+ <link rel="stylesheet" type="text/css" href="css/scrollToTop.css"/>
+ <link rel="stylesheet" type="text/css" href="css/header_footer.css"/>
+ <title>Site de Dimitri DUPARD</title>
+ </head>
+ <body>
+ <header>
+ <h1>Site de présentation de Dimitri DUPARD</h1>
+ <nav id="normal">
+ <ul id="Liens">
+ <li><a href="index.html" id="Index">Accueil</a></li>
+ <li><a href="CV.html" id="CV">CV</a></li>
+ <li><a href="Realisation.html" id="Real">Réalisations</a></li>
+ <li><a href="Contact.html" id="Contact">Contact</a></li>
+ </ul>
+ </nav>
+ <nav class="burger">
+ <a href="#" class="burger__button" id="burger-button">
+ <span class="burger__button__icon"></span>
+ </a>
+ <ul class="burger__menu" id="burger-menu">
+ <li><a href="index.html">Accueil</a></li>
+ <li><a href="CV.html">CV</a></li>
+ <li><a href="Realisation.html">Réalisations</a></li>
+ <li><a href="Contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <a id="TopButton"><img src="img/fleche_haut.png" alt="Image flèche haut"/></a>
+
+ <div id="Realisations">
+ <div id="Prog">
+ <h2>Programmation</h2>
+ <div class="bloc_2" id="C">
+ <h3>C</h3>
+ <div id="Projets">
+ <p>
+ En décembre 2019, dans le cadre d'un projet pour l'IUT, j'ai pu réaliser le jeu Snake. C'était un travail en groupe qui nous a demandé environ 1 mois de développement. Il était doté de règles de base pour le jeu, c'est-à -dire que le serpent accélérait au fur et à mesure du temps et du score de l'utilisateur. En plus de cela, nous avons implémenté 2 modes graphiques différents: 1 mode "classique" et 1 mode "Noël", où le fond devenait rouge, le serpent devenait un traineau et les pommes devenait des cadeaux. Cela m'a permis de réviser des notions qui me paraissaient floues (structures et pointeurs notamment).
+ </p>
+ <div id="ImgsSnake">
+ <figure class="Imgs">
+ <img src="img/SnakeNorm.png" alt="Image du Snake normal"/>
+ <figcaption>Jeu Snake en affichage normal</figcaption>
+ </figure>
+ <figure class="Imgs">
+ <img src="img/SnakeNoel.png" alt="Image du Snake de Noël"/>
+ <figcaption>Jeu Snake en affichage de Noël</figcaption>
+ </figure>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="bloc_2" id="Web">
+ <h2>Web</h2>
+ <div id="Portfolio">
+ <p>
+ Vous vous trouvez actuellement sur un site que j'ai réalisé comme porfolio pour un projet de janvier 2019 pour mon IUT. J'y réunis mon CV et mes réalisations. Il permet aussi de me laisser vos coordonnées pour que nous puissions rester en contact. Pour le endre tel que vous le voyez, j'ai utilisé du HTML5 et du CSS3 pour la structure et la mise en forme, du JavaScript pour le rendre plus dynamique et du PHP pour traiter les informations du formulaire de contact. Il est aussi réalisé avec des media queries, qui lui permettent d'être "responsif" et de pouvoir s'afficher aussi bien sur petit écran (téléphones, tablettes) que sur grand (ordinateur). En ayant déjà eu de l'expérience avec le Web, il était assez facile pour moi à réaliser, cela m'a juste demandé du temps mais je n'ai pas rencontré de difficulté majeure.
+ </p>
+ </div>
+ </div>
+ </div>
+ <footer>
+ <img src="img/2017_11_27_Logotype-IUT-Senart-Fontainebleau_reserve.png" alt="Logo UPEC"/>
+ <p>
+ Téléphone : 07 66 05 76 33<br/>
+ Adresse mail : dimitri.dupard@yahoo.fr
+ </p>
+ <p>
+ Fait par Dimitri DUPARD<br/>
+ Mis à jour le 14/01/2020
+ </p>
+ </footer>
+ <script src="js/scroll.js"></script>
+ <script src="js/menu.js"></script>
+ </body>
+</html>
diff --git a/css/CV.css b/css/CV.css
new file mode 100644
index 0000000000000000000000000000000000000000..2918bb8e836a9e70299a6580be04da1da9140b9e
--- /dev/null
+++ b/css/CV.css
@@ -0,0 +1,244 @@
+h3
+{
+ font-size: 26px;
+}
+
+h4
+{
+ font-size: 24px;
+}
+
+li, p
+{
+ font-size: 22px;
+}
+
+h5
+{
+ font-size: 20px;
+}
+
+h6
+{
+ font-size: 16px;
+ font-weight: normal;
+}
+
+section
+{
+ margin-bottom: 100px;
+}
+
+#CV
+{
+ color:#353535 !important;
+ background-color:#fff !important;
+ border-color:#fff !important;
+}
+
+#CV::before, #CV::after
+{
+ width:calc(100% + 12px) !important;
+ height:calc(100% + 12px) !important;
+ border-color:#fff !important;
+}
+
+#Curiculum
+{
+ margin-left: 5%;
+ width: 90%;
+}
+
+#Curiculum > a
+{
+ position: relative;
+ margin-left: 85%;
+}
+
+#Curiculum > a > img
+{
+ width: 50px;
+ border-radius: 25px;
+ margin-bottom: 25px;
+}
+
+#Autres > section
+{
+ margin-bottom: 50px;
+}
+#Presentation
+{
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ margin-top: 150px;
+}
+
+#Presentation img
+{
+ width: 16%;
+ min-width: 100px;
+}
+
+#Infos
+{
+ font-size: 28px;
+}
+
+#Infos > h3
+{
+ font-weight: normal;
+}
+
+#Corps h3
+{
+ border-bottom: solid 2px white;
+}
+
+.Content
+{
+ display: flex;
+ justify-content: space-around;
+}
+
+#Formation > .Content
+{
+ justify-content: space-between;
+ line-height: 22px;
+}
+
+#CompGen h4, #CompInfo p
+{
+ margin-bottom: 10px;
+}
+
+.FondBarre
+{
+ background: rgb(194, 194, 194);
+ width: 250px;
+ height: 15px;
+ border-radius: 10px/10px;
+}
+
+.FondBarre > div
+{
+ background: rgb(13, 2, 107);
+ height: 100%;
+ border-radius: 10px/10px;
+}
+
+#JaugeProg
+{
+ width: 80%;
+}
+
+#JaugeWeb
+{
+ width: 70%;
+}
+
+#JaugeOS
+{
+ width: 50%;
+}
+
+#JaugeWord
+{
+ width: 90%;
+}
+
+#JaugePowerPoint
+{
+ width: 80%;
+}
+
+#JaugeExcel
+{
+ width: 35%;
+}
+
+#Autres
+{
+ display: flex;
+ justify-content: space-between;
+}
+
+#Langues
+{
+ width: 48%;
+}
+
+#ActPerso
+{
+ width: 48%;
+}
+section a
+{
+ display:inline-block;
+ color: white;
+ text-decoration: none;
+ text-shadow: 3px 3px black;
+}
+
+section a::after
+{
+ display:block;
+ content: '';
+ border-bottom: solid 2px white;
+ transform: scaleX(0);
+ transition: transform 250ms ease-in-out;
+ transform-origin:100% 50%
+}
+
+section a:hover::after
+{
+ transform: scaleX(1);
+ transform-origin:0 50%;
+}
+
+@media screen and (max-width: 1080px)
+{
+ .Content, #Autres
+ {
+ flex-direction: column;
+ }
+
+ .Content > div
+ {
+ margin-bottom: 25px;
+ }
+
+ #Autres > section
+ {
+ width: 100%;
+ }
+
+ .FondBarre
+ {
+ width: 100%;
+ }
+
+ section
+ {
+ margin-bottom: 50px;
+ }
+
+ section > p
+ {
+ text-align: center;
+ }
+}
+
+@media screen and (max-width: 645px)
+{
+ #Presentation
+ {
+ flex-direction: column;
+ margin-bottom: 50px;
+ }
+
+ #Infos
+ {
+ text-align: center;
+ }
+}
diff --git a/css/contact.css b/css/contact.css
new file mode 100644
index 0000000000000000000000000000000000000000..cece10c6899b088bad93f196655a5ce3d304e3ca
--- /dev/null
+++ b/css/contact.css
@@ -0,0 +1,162 @@
+#Contact
+{
+ color:#353535 !important;
+ background-color:#fff !important;
+ border-color:#fff !important;
+}
+
+#Contact::before, #Contact::after
+{
+ width:calc(100% + 12px) !important;
+ height:calc(100% + 12px) !important;
+ border-color:#fff !important;
+}
+
+form
+{
+ width: 100%;
+}
+
+#formulaire
+{
+ border: 10px double white;
+ padding: 20px;
+ border-radius: 20px;
+ font-size: 24px;
+ margin: 150px auto auto auto;
+ display: flex;
+ width: 35%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.groupe
+{
+ width: 100%;
+ display: inherit;
+ justify-content: space-between;
+ margin-bottom: 20px;
+}
+
+.groupe input, .groupe select
+{
+ width: 200px;
+ border: none;
+ padding: 1px;
+}
+
+#Prec
+{
+ display: none;
+}
+
+#Message
+{
+ width: 200px;
+ height: 50px;
+ resize: unset;
+ border: 0;
+ padding: 1px;
+}
+
+#Reponse
+{
+ visibility: hidden;
+}
+
+#Envoi
+{
+ width: 100%;
+ display: inherit;
+ justify-content: space-around;
+ margin-top: 40px;
+}
+
+#Envoi input
+{
+ all: none;
+ color: #e0dddd;
+ background: transparent;
+ border-width: 2px;
+ border-style: solid;
+ border-color: #e0dddd;
+ position: relative;
+ margin: 1em;
+ display: inline-block;
+ padding: 0.5em 1em;
+ transition: all 0.3s ease-in-out;
+ text-align: center;
+ font-family: "comfortaa";
+ font-weight: bold;
+}
+
+#Envoi input:hover
+{
+ color:#353535;
+ background-color:#fff;
+ border-color:#fff;
+}
+
+#logoMail
+{
+ width: 75px;
+ margin-top: 10px;
+}
+
+#main
+{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+footer
+{
+ margin-top: 29px;
+}
+
+@media screen and (max-width: 1080px)
+{
+ #formulaire
+ {
+ width: 50%;
+ }
+}
+
+@media screen and (max-width: 900px)
+{
+ #formulaire
+ {
+ width: 75%;
+ }
+}
+
+@media screen and (max-width: 580px)
+{
+ #formulaire
+ {
+ width: 90%;
+ }
+}
+
+@media screen and (max-width: 480px)
+{
+ #formulaire
+ {
+ font-size: 16px;
+ }
+ .groupe input, .groupe select, #Message
+ {
+ width: 125px;
+ }
+}
+
+@media screen and (min-height: 935px) and (orientation: portrait)
+{
+ footer
+ {
+ position: fixed;
+ bottom: 0;
+ }
+}
\ No newline at end of file
diff --git a/css/header_footer.css b/css/header_footer.css
new file mode 100644
index 0000000000000000000000000000000000000000..f3c6b43b435d99a77d149aea11ab5f7c98a35451
--- /dev/null
+++ b/css/header_footer.css
@@ -0,0 +1,288 @@
+@import 'https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext';
+
+*
+{
+ font-family: comfortaa, "sans-serif";
+}
+
+body, html
+{
+ margin: 0;
+ padding: 0;
+ background-color: rgb(61, 60, 60);
+ color: white;
+}
+
+header
+{
+ display: flex;
+ background-color: rgb(29, 32, 34);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ left: 0;
+ border-bottom: 5px solid;
+ border-image-source: linear-gradient(rgb(61, 60, 60), rgb(29, 32, 34));
+}
+
+header > h1
+{
+ color: white;
+ font-size: 30px;
+ width: 362px;
+ margin-left: 2%;
+ margin-bottom: 10px;
+}
+
+nav
+{
+ position: fixed;
+ right: 80px;
+}
+
+nav ul
+{
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+}
+
+nav ul li
+{
+ list-style-type: none;
+ margin-right: 10px;
+ font-size: 18px;
+}
+
+#normal a
+{
+ color: #838383;
+ background: transparent;
+ border-width: 2px;
+ border-style: solid;
+ border-color: #838383;
+ position: relative;
+ margin: 1em;
+ display: inline-block;
+ padding: 0.5em 1em;
+ transition: all 0.3s ease-in-out;
+ text-align: center;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+#normal a::before, #normal a::after
+{
+ content:'';
+ display:block;
+ position:absolute;
+ border-color:#838383;
+ box-sizing:border-box;
+ border-style:solid;
+ width:1em;
+ height:1em;
+ transition:all 0.3s ease-in-out;
+}
+
+#normal a::before
+{
+ top:-6px;
+ left:-6px;
+ border-width:2px 0 0 2px;
+ z-index:5;
+}
+
+#normal a::after
+{
+ bottom:-6px;
+ right:-6px;
+ border-width:0 2px 2px 0;
+}
+
+#normal a:hover::before, #normal a:hover::after
+{
+ width:calc(100% + 12px);
+ height:calc(100% + 12px);
+ border-color:#fff;
+}
+
+#normal a:hover
+{
+ color:#353535;
+ background-color:#fff;
+ border-color:#fff;
+}
+
+footer
+{
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ color: white;
+ font-size: 18px;
+ line-height: 24px;
+ width: 100%;
+ background-color: rgb(29, 32, 34);
+}
+
+footer > img
+{
+ margin-top: 20px;
+ margin-left: 10px;
+ max-width: 246px;
+}
+
+.burger
+{
+ display: none;
+}
+
+#normal
+{
+ display: block;
+}
+
+@media screen and (max-width: 1024px)
+{
+ * {
+ box-sizing: border-box;
+ }
+ .burger {
+ display: block;
+ position: fixed;
+ top: 25px;
+ right: 0px;
+ width: 211px;
+ }
+ .burger__button {
+ display: block;
+ position: relative;
+ margin-left: 125px;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ text-align: center;
+ vertical-align: middle;
+ border: 2px solid white;
+ transition: all 0.5s ease;
+ }
+ .burger__button.open {
+ border: 2px solid #fff;
+ box-shadow: none;
+ }
+ .burger__button__icon {
+ display: inline-block;
+ position: absolute;
+ background: #fff;
+ margin: 0 auto;
+ width: 20px;
+ height: 2px;
+ top: 50%;
+ left: 0;
+ right: 0;
+ transition: all 0.5s ease;
+ transform: translateY(-1px);
+ }
+ .burger__button__icon:before,
+ .burger__button__icon:after {
+ content: "";
+ position: absolute;
+ margin: 0 auto;
+ background: #fff;
+ width: 20px;
+ height: 2px;
+ left: 0;
+ right: 0;
+ transition: all 0.5s ease;
+ }
+ .burger__button__icon:before {
+ bottom: 10px;
+ }
+ .burger__button__icon:after {
+ top: 10px;
+ }
+ .burger__button.open .burger__button__icon {
+ background: transparent;
+ }
+ .burger__button.open .burger__button__icon:before,
+ .burger__button.open .burger__button__icon:after {
+ transform-origin: 0 50%;
+ width: 28.28427125px;
+ }
+ .burger__button.open .burger__button__icon:before {
+ transform: rotateZ(0.78539816rad);
+ }
+ .burger__button.open .burger__button__icon:after {
+ transform: rotateZ(-0.78539816rad);
+ }
+ .burger__menu {
+ display: none;
+ flex-direction: column;
+ list-style-type: none;
+ padding: 10px;
+ margin-top: 25px;
+ background: transparent;
+ transition: background 0.5s ease;
+ }
+ .burger__menu li {
+ display: block;
+ position: relative;
+ margin: 15px 0;
+ visibility: hidden;
+ transition: all 0.5s ease;
+ transform: translateY(-400px);
+ }
+ .burger__menu a {
+ display: block;
+ text-decoration: none;
+ color: black;
+ font-size: 30px;
+ font-weight: normal;
+ transition: all 0.4s ease;
+ border-left: 3px solid transparent;
+ padding-left: 0;
+ }
+ .burger__menu a:hover {
+ padding-left: 30px;
+ border-left: 3px solid #fff;
+ }
+ .burger__button.open + .burger__menu {
+ background: rgb(255, 255, 255);
+ }
+ .burger__button.open + .burger__menu li {
+ transform: translateX(0);
+ visibility: visible;
+ }
+
+ #normal
+ {
+ display: none;
+ }
+
+ footer > img
+ {
+ width: 30%;
+ }
+}
+
+@media screen and (max-width: 713px)
+{
+ footer > p
+ {
+ font-size: 10px;
+ }
+
+ header h1
+ {
+ font-size: 26px;
+ width: 275px;
+ }
+}
+
+@media screen and (max-height: 500px) and (orientation: landscape)
+{
+ header h1
+ {
+ font-size: 28px;
+ }
+}
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..94c6467e66671429debdf71e80873bf442495b65
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,115 @@
+#Index
+{
+ color:#353535 !important;
+ background-color:#fff !important;
+ border-color:#fff !important;
+}
+
+#Index::before, #Index::after
+{
+ width:calc(100% + 12px) !important;
+ height:calc(100% + 12px) !important;
+ border-color:#fff !important;
+}
+
+section
+{
+ font-size: 22px;
+ width: 25%;
+ border: 10px double white;
+ padding: 20px;
+ border-radius: 20px;
+ line-height: 32px;
+}
+
+#Presentation
+{
+ text-align: justify;
+}
+
+#Groupe_1
+{
+ margin: 150px auto 100px auto;
+ display: flex;
+ justify-content: space-around;
+}
+
+#Groupe_1 > img
+{
+ width: 30%;
+ height: 30%;
+}
+
+#Groupe_2
+{
+ margin-bottom: 75px;
+ display: flex;
+ justify-content: space-around;
+}
+
+section a
+{
+ border: none;
+ display:inline-block;
+ color: white;
+ text-decoration: none;
+ text-shadow: 3px 3px black;
+}
+
+section a::after
+{
+ display:block;
+ content: '';
+ border-bottom: solid 2px white;
+ transform: scaleX(0);
+ transition: transform 250ms ease-in-out;
+ transform-origin:100% 50%;
+}
+
+section a:hover::after
+{
+ transform: scaleX(1);
+ transform-origin:0 50%;
+}
+
+
+@media screen and (max-width: 1200px)
+{
+ section
+ {
+ width: 35%;
+ }
+
+ #Groupe_1 > img
+ {
+ margin-left: 125px;
+ }
+}
+
+@media screen and (max-width: 800px)
+{
+ #Groupe_1, #Groupe_2
+ {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ #Groupe_1
+ {
+ margin-bottom: 0;
+ }
+
+ #Groupe_1 > img
+ {
+ margin-left: 0;
+ margin-bottom: 50px;
+ }
+
+ section
+ {
+ overflow-wrap: break-word;
+ width: 85%;
+ margin-bottom: 50px;
+ font-size: 22px;
+ }
+}
diff --git a/css/real.css b/css/real.css
new file mode 100644
index 0000000000000000000000000000000000000000..06b264b0801e9c34ac4d1db199c6d88337db5ebd
--- /dev/null
+++ b/css/real.css
@@ -0,0 +1,113 @@
+h2
+{
+ font-size: 28px;
+ border-bottom: 2px white solid;
+ padding-bottom: 2px;
+ margin-bottom: 50px;
+}
+
+h3
+{
+ font-size: 26px;
+ border-bottom: 2px white solid;
+ padding-bottom: 2px;
+}
+
+#Realisations p
+{
+ text-align: justify;
+ font-size: 22px;
+ width: 25%;
+ border: 10px double white;
+ padding: 20px;
+ border-radius: 20px;
+ line-height: 32px;
+}
+
+figcaption
+{
+ font-size: 16px;
+ font-style: italic;
+ text-align: center;
+}
+
+#Real
+{
+ color:#353535 !important;
+ background-color:#fff !important;
+ border-color:#fff !important;
+}
+
+#Real::before, #Real::after
+{
+ width:calc(100% + 12px) !important;
+ height:calc(100% + 12px) !important;
+ border-color:#fff !important;
+}
+
+#Realisations
+{
+ margin-left: 2%;
+ width: 97%;
+}
+
+#Prog
+{
+ margin-top: 150px;
+}
+
+.bloc_2
+{
+ margin-left: 2%;
+ margin-bottom: 75px;
+}
+
+#Projets
+{
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+}
+
+#ImgsSnake
+{
+ width: 40%;
+ margin: 0;
+}
+
+#Realisations img
+{
+ width: 100%;
+ height: 40%;
+ margin-bottom: 10px;
+}
+
+.Imgs
+{
+ margin-bottom: 50px;
+}
+
+#Portfolio > p
+{
+ margin: auto;
+ width: 50%;
+}
+
+@media screen and (max-width: 1080px)
+{
+ #Projets
+ {
+ flex-direction: column;
+ }
+
+ #Realisations p
+ {
+ width: 90%;
+ margin-bottom: 50px;
+ }
+
+ #ImgsSnake
+ {
+ width: 65%;
+ }
+}
\ No newline at end of file
diff --git a/css/scrollToTop.css b/css/scrollToTop.css
new file mode 100644
index 0000000000000000000000000000000000000000..b317a9ab42ff4df99a2ecad760b333f6b5e4ea1b
--- /dev/null
+++ b/css/scrollToTop.css
@@ -0,0 +1,35 @@
+#TopButton
+{
+ display: inline-block;
+ background-color: rgb(95, 95, 95);
+ width: 50px;
+ height: 50px;
+ text-align: center;
+ border-radius: 25px;
+ position: fixed;
+ bottom: 30px;
+ left: 10px;
+ transition: background-color .3s,
+ opacity .5s, visibility .5s;
+ opacity: 0;
+ visibility: hidden;
+ z-index: 1000;
+}
+
+#TopButton > img
+{
+ width: 50px;
+ height: 50px;
+ border-radius: 4px;
+}
+
+#TopButton:hover
+{
+ cursor: pointer;
+ background-color: rgb(14, 14, 14);
+}
+
+#TopButton:active
+{
+ background-color: #555;
+}
\ No newline at end of file
diff --git a/img/2017_11_27_Logotype-IUT-Senart-Fontainebleau_reserve.png b/img/2017_11_27_Logotype-IUT-Senart-Fontainebleau_reserve.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd4d1d62cca64775fa966a58dd4fc66e0ba2ddbe
Binary files /dev/null and b/img/2017_11_27_Logotype-IUT-Senart-Fontainebleau_reserve.png differ
diff --git a/img/2017_11_27_Logotype-IUT-Senart-Fontainebleau_rvb.svg b/img/2017_11_27_Logotype-IUT-Senart-Fontainebleau_rvb.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5c2879f877b19c2f38e46b1b23701a213c64c054
--- /dev/null
+++ b/img/2017_11_27_Logotype-IUT-Senart-Fontainebleau_rvb.svg
@@ -0,0 +1,168 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 246 120" style="enable-background:new 0 0 246 120;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#E42535;}
+ .st1{fill:#FFFFFF;}
+ .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+ .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#BDDC04;}
+ .st4{fill-rule:evenodd;clip-rule:evenodd;fill:#E42535;}
+ .st5{fill:#005F72;}
+ .st6{fill:#1D1D1B;}
+ .st7{fill:#778792;}
+ .st8{fill:#9C0F12;}
+ .st9{fill:#AE0E16;}
+ .st10{fill:#C00C1A;}
+ .st11{fill:#D1091E;}
+ .st12{fill:#9C9B9B;}
+ .st13{fill:#220000;}
+ .st14{fill:#390200;}
+ .st15{fill:#500700;}
+ .st16{fill:#630B00;}
+ .st17{fill:#780E06;}
+ .st18{fill:#890F0C;}
+ .st19{clip-path:url(#SVGID_2_);fill:url(#SVGID_3_);}
+ .st20{fill:#12110C;}
+ .st21{clip-path:url(#SVGID_5_);fill:#E42535;}
+ .st22{clip-path:url(#SVGID_7_);fill:url(#SVGID_8_);}
+ .st23{fill:#901B15;}
+ .st24{fill:#DC0F18;}
+ .st25{clip-path:url(#SVGID_10_);fill:url(#SVGID_11_);}
+ .st26{clip-path:url(#SVGID_13_);fill:#E42535;}
+ .st27{clip-path:url(#SVGID_15_);fill:url(#SVGID_16_);}
+ .st28{clip-path:url(#SVGID_18_);fill:url(#SVGID_19_);}
+ .st29{clip-path:url(#SVGID_21_);fill:url(#SVGID_22_);}
+ .st30{clip-path:url(#SVGID_24_);fill:url(#SVGID_25_);}
+ .st31{clip-path:url(#SVGID_27_);fill:url(#SVGID_28_);}
+ .st32{clip-path:url(#SVGID_30_);fill:url(#SVGID_31_);}
+ .st33{clip-path:url(#SVGID_33_);fill:url(#SVGID_34_);}
+ .st34{clip-path:url(#SVGID_36_);fill:url(#SVGID_37_);}
+ .st35{clip-path:url(#SVGID_39_);fill:url(#SVGID_40_);}
+ .st36{clip-path:url(#SVGID_42_);fill:url(#SVGID_43_);}
+ .st37{clip-path:url(#SVGID_45_);fill:url(#SVGID_46_);}
+ .st38{clip-path:url(#SVGID_48_);fill:url(#SVGID_49_);}
+ .st39{clip-path:url(#SVGID_51_);}
+ .st40{clip-path:url(#SVGID_53_);}
+ .st41{fill:#38B5B8;}
+ .st42{clip-path:url(#SVGID_57_);fill:#FFFFFF;}
+ .st43{clip-path:url(#SVGID_59_);fill:#FFFFFF;}
+ .st44{clip-path:url(#SVGID_61_);fill:#FFFFFF;}
+ .st45{clip-path:url(#SVGID_63_);fill:#FFFFFF;}
+ .st46{clip-path:url(#SVGID_65_);fill:#FFFFFF;}
+ .st47{clip-path:url(#SVGID_67_);fill:#FFFFFF;}
+ .st48{clip-path:url(#SVGID_69_);fill:#FFFFFF;}
+ .st49{clip-path:url(#SVGID_71_);fill:#FFFFFF;}
+ .st50{clip-path:url(#SVGID_73_);fill:#FFFFFF;}
+ .st51{clip-path:url(#SVGID_75_);fill:#FFFFFF;}
+ .st52{clip-path:url(#SVGID_77_);fill:#FFFFFF;}
+ .st53{clip-path:url(#SVGID_79_);fill:#FFFFFF;}
+ .st54{clip-path:url(#SVGID_81_);fill:#FFFFFF;}
+ .st55{clip-path:url(#SVGID_83_);fill:#FFFFFF;}
+ .st56{clip-path:url(#SVGID_85_);fill:#FFFFFF;}
+ .st57{clip-path:url(#SVGID_87_);fill:#FFFFFF;}
+ .st58{fill:#4A5F70;}
+ .st59{fill:none;}
+</style>
+<g>
+ <path d="M29.4,46.7h11c6.4,0,10.3,3.8,10.3,9.3V56c0,6.2-4.8,9.4-10.9,9.4h-4.5v8.1h-5.9V46.7z M40,60.2c3,0,4.7-1.8,4.7-4.1v-0.1
+ c0-2.6-1.8-4.1-4.8-4.1h-4.6v8.2H40z"/>
+ <path d="M53.3,46.7h20.2v5.3H59.1v5.4h12.7v5.3H59.1v5.6h14.6v5.3H53.3V46.7z"/>
+ <path d="M75.2,60.2L75.2,60.2c0-7.7,5.8-14,14-14c5.1,0,8.1,1.7,10.6,4.1L96,54.7c-2.1-1.9-4.2-3-6.9-3c-4.5,0-7.8,3.8-7.8,8.4v0.1
+ c0,4.6,3.2,8.4,7.8,8.4c3.1,0,4.9-1.2,7.1-3.1l3.8,3.8c-2.8,3-5.8,4.8-11,4.8C81.1,74,75.2,67.9,75.2,60.2z"/>
+ <path d="M17.5,62.1c0,4.3-2.2,6.4-5.8,6.4c-3.6,0-5.8-2.3-5.8-6.6V46.7H0V62c0,7.9,4.4,11.9,11.6,11.9c7.2,0,11.8-4,11.8-12.1
+ l0-18.4l-6,2V62.1z"/>
+ <polygon class="st0" points="23.4,27.9 23.4,43 23.5,43.4 99.4,17.9 99.4,2.4 "/>
+ <polygon points="110.5,86.7 109.8,86.7 109.8,33.5 110.5,33.5 110.5,86.7 "/>
+ <g>
+ <g>
+ <path d="M0.7,79.7v2.5c0,0.7,0.1,1.2,1,1.2c0.8,0,0.9-0.6,0.9-1.2v-2.5H3v2.7c0,0.9-0.4,1.4-1.4,1.4c-1,0-1.5-0.5-1.5-1.4v-2.7
+ H0.7z"/>
+ <path d="M4.7,79.7h0.5l2,3.2h0v-3.2h0.5v4H7.2l-2-3.2h0v3.2H4.7V79.7z"/>
+ <path d="M9.5,79.7H10v4H9.5V79.7z"/>
+ <path d="M13.4,83.7h-0.5l-1.5-4h0.6l1.3,3.3l1.2-3.3h0.5L13.4,83.7z"/>
+ <path d="M16.1,79.7h2.2v0.4h-1.7v1.3H18v0.4h-1.4v1.5h1.8v0.4h-2.3V79.7z"/>
+ <path d="M19.8,79.7h1.3c0.4,0,1.1,0.2,1.1,1c0,0.5-0.4,1-0.8,1.1l1.3,1.9H22L20.9,82h-0.5v1.7h-0.5V79.7z M20.3,81.6
+ c0.1,0,0.1,0,0.2,0c0.7,0,1.1-0.3,1.1-0.9c0-0.4-0.3-0.6-0.8-0.6h-0.5V81.6z"/>
+ <path d="M23.7,83.1c0.4,0.2,0.7,0.3,1.1,0.3c0.4,0,0.7-0.2,0.7-0.6c0-1-1.9-1-1.9-2.1c0-0.3,0.3-1.1,1.2-1.1
+ c0.3,0,0.6,0.1,0.9,0.2v0.5C25.6,80.1,25.3,80,25,80c-0.5,0-0.7,0.3-0.7,0.6c0,0.8,1.9,0.9,1.9,2.1c0,0.4-0.3,1.1-1.4,1.1
+ c-0.4,0-0.7-0.1-1-0.2V83.1z"/>
+ <path d="M27.7,79.7h0.5v4h-0.5V79.7z"/>
+ <path d="M30.9,80.1h-1.4v-0.4h3.4v0.4h-1.4v3.6h-0.5V80.1z"/>
+ <path d="M34.2,79.7h2.2v0.4h-1.7v1.3h1.4v0.4h-1.4v1.5h1.8v0.4h-2.3V79.7z M35.3,78.6h0.6l-0.7,0.8h-0.5L35.3,78.6z"/>
+ <path d="M40.3,79.7h1.3c0.6,0,1.1,0.3,1.1,1c0,1.1-0.9,1.4-1.9,1.4v1.6h-0.5V79.7z M40.8,81.7c0.8,0,1.3-0.2,1.3-0.9
+ c0-0.5-0.4-0.7-0.7-0.7h-0.6V81.7z"/>
+ <path d="M44.8,79.7h0.5l1.6,4h-0.6l-0.5-1.1h-1.8l-0.4,1.1h-0.5L44.8,79.7z M45.8,82.2L45,80.4l-0.7,1.8H45.8z"/>
+ <path d="M48.2,79.7h1.3c0.4,0,1.1,0.2,1.1,1c0,0.5-0.4,1-0.8,1.1l1.3,1.9h-0.7L49.3,82h-0.5v1.7h-0.5V79.7z M48.8,81.6
+ c0.1,0,0.1,0,0.2,0c0.7,0,1.1-0.3,1.1-0.9c0-0.4-0.3-0.6-0.8-0.6h-0.5V81.6z"/>
+ <path d="M52.4,79.7H53v4h-0.5V79.7z"/>
+ <path d="M54.5,83.1c0.4,0.2,0.7,0.3,1.1,0.3c0.4,0,0.7-0.2,0.7-0.6c0-1-1.9-1-1.9-2.1c0-0.3,0.3-1.1,1.2-1.1
+ c0.3,0,0.6,0.1,0.9,0.2v0.5C56.3,80.1,56,80,55.7,80c-0.5,0-0.7,0.3-0.7,0.6c0,0.8,1.9,0.9,1.9,2.1c0,0.4-0.3,1.1-1.4,1.1
+ c-0.4,0-0.7-0.1-1-0.2V83.1z"/>
+ <path d="M58.2,81.9h1.2v0.4h-1.2V81.9z"/>
+ <path d="M60.9,79.7h2.2v0.4h-1.7v1.3h1.4v0.4h-1.4v1.5h1.8v0.4h-2.3V79.7z"/>
+ <path d="M64.3,83.1c0.4,0.2,0.7,0.3,1.1,0.3c0.4,0,0.7-0.2,0.7-0.6c0-1-1.9-1-1.9-2.1c0-0.3,0.3-1.1,1.2-1.1
+ c0.3,0,0.6,0.1,0.9,0.2v0.5c-0.3-0.1-0.6-0.3-0.9-0.3c-0.5,0-0.7,0.3-0.7,0.6c0,0.8,1.9,0.9,1.9,2.1c0,0.4-0.3,1.1-1.4,1.1
+ c-0.4,0-0.7-0.1-1-0.2V83.1z"/>
+ <path d="M69.2,80.1h-1.4v-0.4h3.4v0.4h-1.4v3.6h-0.5V80.1z"/>
+ <path d="M77.9,80.3c-0.4-0.1-0.8-0.3-1.4-0.3c-1,0-1.3,0.9-1.3,1.7c0,0.8,0.3,1.7,1.3,1.7c0.6,0,1-0.1,1.4-0.4v0.5
+ c-0.4,0.2-0.8,0.3-1.4,0.3c-1.2,0-1.9-1-1.9-2.1c0-1.2,0.6-2.1,1.9-2.1c0.5,0,0.9,0.1,1.4,0.2V80.3z"/>
+ <path d="M79.4,79.7h1.3c0.4,0,1.1,0.2,1.1,1c0,0.5-0.4,1-0.8,1.1l1.3,1.9h-0.7L80.5,82H80v1.7h-0.5V79.7z M80,81.6
+ c0.1,0,0.1,0,0.2,0c0.7,0,1.1-0.3,1.1-0.9c0-0.4-0.3-0.6-0.8-0.6H80V81.6z"/>
+ <path d="M83.6,79.7h2.2v0.4h-1.7v1.3h1.4v0.4h-1.4v1.5H86v0.4h-2.3V79.7z M84.7,78.6h0.6l-0.7,0.8h-0.5L84.7,78.6z"/>
+ <path d="M88.3,80.1h-1.4v-0.4h3.4v0.4h-1.4v3.6h-0.5V80.1z"/>
+ <path d="M91.5,79.7h2.2v0.4h-1.7v1.3h1.4v0.4h-1.4v1.5h1.8v0.4h-2.3V79.7z"/>
+ <path d="M95.2,79.7h0.5v4h-0.5V79.7z"/>
+ <path d="M97.5,79.7H98v3.6h1.8v0.4h-2.3V79.7z"/>
+ </g>
+ </g>
+ <g>
+ <g>
+ <g>
+ <path class="st3" d="M125.8,56.1c8.9,7.4,26.9,5.7,44.3-5.1c10.3-6.4,18.5-15,23.4-23.6l-7.6,2.9c0,0-8.7,16.1-27.9,25.3
+ c-19.2,9.2-34.8,5.1-37.6,2.1L125.8,56.1z"/>
+ </g>
+ <polyline class="st4" points="123,42.8 123,53.6 133.8,53.6 133.8,42.8 123,42.8 "/>
+ <g>
+ <path class="st5" d="M137.1,42.8h3.1v10.8h-3.1V42.8z"/>
+ <path class="st5" d="M141.9,49.3v-6.5h3.1v6.6c0,1.3,0.7,1.9,1.8,1.9c1.1,0,1.8-0.6,1.8-1.9v-6.6h3.1v6.5c0,3.1-2,4.5-4.9,4.5
+ C143.8,53.8,141.9,52.4,141.9,49.3z"/>
+ <path class="st5" d="M155.6,45.3h-2.9v-2.5h9v2.5h-2.9v8.3h-3.1V45.3z"/>
+ </g>
+ <g>
+ <path d="M125.2,79.9h-1.8v-5.6h4.6v0.9h-2.8v1.5h2.3v0.8h-2.3V79.9z"/>
+ <path d="M127.8,77.1c0-1.8,1.4-2.9,3.6-2.9c2.2,0,3.6,1.1,3.6,2.9c0,1.8-1.4,2.9-3.6,2.9C129.2,80,127.8,78.9,127.8,77.1z
+ M132.4,78.8c0.5-0.3,0.8-1,0.8-1.7c0-0.7-0.3-1.4-0.8-1.7c-0.2-0.2-0.6-0.3-1-0.3c-0.4,0-0.7,0.1-1,0.3c-0.5,0.3-0.8,1-0.8,1.7
+ c0,1.2,0.7,2,1.7,2C131.8,79.1,132.1,79,132.4,78.8z"/>
+ <path d="M139.8,77.7v-3.3h1.3v5.6h-1.5l-2.9-3.3v3.3h-1.3v-5.6h1.5L139.8,77.7z"/>
+ <path d="M145.5,79.9h-1.8v-4.6h-2.4v-0.9h6.6v0.9h-2.4V79.9z"/>
+ <path d="M154.3,79.9h-1.8l-0.7-1.4h-2.6l-0.7,1.4h-1.2l2.6-5.6h1.8L154.3,79.9z M149.7,77.6h1.8l-0.9-2L149.7,77.6z"/>
+ <path d="M156.3,79.9h-1.8v-5.6h1.8V79.9z"/>
+ <path d="M161.5,77.7v-3.3h1.3v5.6h-1.5l-2.9-3.3v3.3h-1.3v-5.6h1.5L161.5,77.7z"/>
+ <path d="M168.5,79.9h-4.8v-5.6h4.6v0.9h-2.8v1.3h2.3v0.8h-2.3V79h3V79.9z"/>
+ <path d="M169,74.3h2.7c0.8,0,1.2,0.1,1.5,0.3c0.3,0.2,0.5,0.6,0.5,0.9c0,0.3-0.2,0.7-0.5,0.9c-0.3,0.2-0.6,0.3-1.3,0.5
+ c0.7,0.1,0.9,0.2,1.3,0.4c0.5,0.3,0.7,0.7,0.7,1.1c0,0.4-0.2,0.8-0.6,1c-0.4,0.2-0.8,0.3-1.6,0.3H169V74.3z M170.9,76.5
+ c0.6,0,1-0.3,1-0.8c0-0.2-0.1-0.4-0.3-0.4c-0.2-0.1-0.2-0.1-0.9-0.1h-0.2v1.3H170.9z M170.6,78.9h0.4c0.3,0,0.5,0,0.6,0
+ c0.4-0.1,0.6-0.3,0.6-0.6c0-0.5-0.6-0.9-1.3-0.9h-0.3V78.9z"/>
+ <path d="M179.2,79.9h-4.8v-5.6h1.8V79h3V79.9z"/>
+ <path d="M184.3,79.9h-4.8v-5.6h4.6v0.9h-2.8v1.3h2.3v0.8h-2.3V79h3V79.9z"/>
+ <path d="M191.4,79.9h-1.8l-0.7-1.4h-2.6l-0.7,1.4h-1.2l2.6-5.6h1.8L191.4,79.9z M186.8,77.6h1.8l-0.9-2L186.8,77.6z"/>
+ <path d="M197.1,77.6c0,1-0.2,1.4-0.7,1.8c-0.5,0.4-1.2,0.6-2.1,0.6c-0.9,0-1.7-0.2-2.2-0.6c-0.5-0.4-0.7-0.8-0.7-1.8v-3.3h1.8
+ v3.3c0,0.6,0.1,0.9,0.3,1.2c0.2,0.2,0.5,0.3,0.9,0.3c0.8,0,1.2-0.4,1.2-1.3v-3.5h1.6V77.6z"/>
+ </g>
+ <g>
+ <path d="M125.9,65.7c0.4,0.2,0.7,0.3,1,0.5c0.6,0.3,0.9,0.8,0.9,1.3c0,1.1-1,1.7-2.7,1.7c-0.7,0-1,0-2.1-0.1V68
+ c0.2,0.1,0.3,0.1,0.4,0.1c0.5,0.1,1,0.2,1.5,0.2c0.7,0,1.1-0.2,1.1-0.6c0-0.3-0.2-0.4-0.8-0.7l-0.4-0.2
+ c-1.2-0.6-1.7-1.1-1.7-1.8c0-1,0.9-1.6,2.4-1.6c0.7,0,1,0,2,0.2v1.1c-0.1,0-0.2-0.1-0.3-0.1c-0.5-0.1-1-0.2-1.4-0.2
+ c-0.5,0-0.9,0.2-0.9,0.5c0,0.2,0.2,0.4,0.8,0.7L125.9,65.7z"/>
+ <path d="M133.2,69.1h-4.8v-5.6h4.6v0.9h-2.8v1.3h2.3v0.8h-2.3v1.5h3V69.1z"/>
+ <path d="M138.3,66.9v-3.3h1.3v5.6h-1.5l-2.9-3.3v3.3h-1.3v-5.6h1.5L138.3,66.9z"/>
+ <path d="M147,69.1h-1.8l-0.7-1.4H142l-0.7,1.4h-1.2l2.6-5.6h1.8L147,69.1z M142.4,66.8h1.8l-0.9-2L142.4,66.8z"/>
+ <path d="M153.4,69.1h-2.2l-1.4-2.2h-0.6v2.2h-1.7v-5.6h2.9c0.8,0,1.2,0.1,1.5,0.4c0.4,0.2,0.5,0.6,0.5,1c0,0.7-0.5,1.3-1.2,1.6
+ L153.4,69.1z M149.2,66h0.3c0.8,0,1.2-0.3,1.2-0.9c0-0.5-0.3-0.6-1.2-0.6h-0.3V66z"/>
+ <path d="M157.5,69.1h-1.8v-4.6h-2.4v-0.9h6.6v0.9h-2.4V69.1z"/>
+ </g>
+ </g>
+ </g>
+</g>
+</svg>
diff --git a/img/IMG_20191211_205430.jpg b/img/IMG_20191211_205430.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2a7a917980b54ee7e6a814e313ee519f30e3657b
Binary files /dev/null and b/img/IMG_20191211_205430.jpg differ
diff --git a/img/SnakeNoel.png b/img/SnakeNoel.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6f040ce8d69d5b18e218f536046e767e46e6038
Binary files /dev/null and b/img/SnakeNoel.png differ
diff --git a/img/SnakeNorm.png b/img/SnakeNorm.png
new file mode 100644
index 0000000000000000000000000000000000000000..7472d388f0d326b941f84e72a048e5eeacd9d849
Binary files /dev/null and b/img/SnakeNorm.png differ
diff --git a/img/fleche_haut.png b/img/fleche_haut.png
new file mode 100644
index 0000000000000000000000000000000000000000..5edf4cc9f31f5976dd169f58a4d708ddd4052839
Binary files /dev/null and b/img/fleche_haut.png differ
diff --git a/img/icone-mail-blanc-png.png b/img/icone-mail-blanc-png.png
new file mode 100644
index 0000000000000000000000000000000000000000..f61cb982e60c246bf124e83ebfd2ddabeff16c32
Binary files /dev/null and b/img/icone-mail-blanc-png.png differ
diff --git a/img/pdf.png b/img/pdf.png
new file mode 100644
index 0000000000000000000000000000000000000000..58233b4599a7c8dc4b141607810401da132ea973
Binary files /dev/null and b/img/pdf.png differ
diff --git a/index.html b/index.html
new file mode 100755
index 0000000000000000000000000000000000000000..1119e52f2cbf2e83df4198e00e16909dd02b8e62
--- /dev/null
+++ b/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+ <link rel="stylesheet" type="text/css" href="css/index.css"/>
+ <link rel="stylesheet" type="text/css" href="css/scrollToTop.css"/>
+ <link rel="stylesheet" type="text/css" href="css/header_footer.css"/>
+ <title>Site de Dimitri DUPARD</title>
+ </head>
+ <body>
+ <header>
+ <h1>Site de présentation de Dimitri DUPARD</h1>
+ <nav id="normal">
+ <ul id="Liens">
+ <li><a href="index.html" id="Index">Accueil</a></li>
+ <li><a href="CV.html" id="CV">CV</a></li>
+ <li><a href="Realisation.html" id="Real">Réalisations</a></li>
+ <li><a href="Contact.html" id="Contact">Contact</a></li>
+ </ul>
+ </nav>
+ <nav class="burger">
+ <a href="#" class="burger__button" id="burger-button">
+ <span class="burger__button__icon"></span>
+ </a>
+ <ul class="burger__menu" id="burger-menu">
+ <li><a href="index.html">Accueil</a></li>
+ <li><a href="CV.html">CV</a></li>
+ <li><a href="Realisation.html">Réalisations</a></li>
+ <li><a href="Contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <a id="TopButton"><img src="img/fleche_haut.png" alt="Image flèche haut"/></a>
+
+ <div id="Groupe_1">
+ <img src="img/IMG_20191211_205430.jpg" alt="Photo de moi"/>
+ <section>
+ <p>
+ Je m'appelle Dimitri, j'ai 18 ans et j'étudie actuellement en DUT Informatique à l'IUT de Sénart-Fontainebleau sur le site de Fontainebleau. <br/><br/>J'ai déjà vu quelques informations aux
+ sujets de métiers que je souhaite faire plus tard, tels que "pentester" ou bien développeur back-end, et je recherche actuellement un stage à effectuer lors de mon second semestre de deuxième année.<br/><br/>Les deux sections ci-dessous, toutes deux cliquables, résument quelques compétences que je possède en informatique. En cliquant sur un élément d'une des deux listes, vous serez amené vers la section correspondante sur mon CV.
+ </p>
+ </section>
+ </div>
+ <div id="Groupe_2">
+ <section>
+ <h2>Programmation</h2>
+ <ul>
+ <li><a href="CV.html#Programmation">Orientée Objet</a></li>
+ <li><a href="CV.html#Programmation">Classique(C89)</a></li>
+ </ul>
+ </section>
+ <section>
+ <h2>Autres</h2>
+ <ul>
+ <li><a href="CV.html#Web">Web</a></li>
+ <li><a href="CV.html#Web">Bases de données</a></li>
+ <li><a href="CV.html#OS">Systèmes d'exploitation</a></li>
+ </ul>
+ </section>
+ </div>
+ <footer>
+ <img src="img/2017_11_27_Logotype-IUT-Senart-Fontainebleau_reserve.png" alt="Logo UPEC"/>
+ <p>
+ Téléphone : 07 66 05 76 33<br/>
+ Adresse mail : dimitri.dupard@yahoo.fr
+ </p>
+ <p>
+ Fait par Dimitri DUPARD<br/>
+ Mis à jour le 14/01/2020
+ </p>
+ </footer>
+ <script src="js/scroll.js"></script>
+ <script src="js/menu.js"></script>
+ </body>
+</html>
diff --git a/js/menu.js b/js/menu.js
new file mode 100644
index 0000000000000000000000000000000000000000..c63d3f22a5756ab2ec1506bf45a35e0a9e2f0ac2
--- /dev/null
+++ b/js/menu.js
@@ -0,0 +1,15 @@
+let burger = document.getElementById("burger-button");
+let menu = document.getElementById("burger-menu");
+
+burger.addEventListener("click", (e) => {
+ e.preventDefault();
+ burger.classList.toggle("open");
+ if(burger.classList.contains("open") === true)
+ {
+ menu.style.display = "flex";
+ }
+ else
+ {
+ menu.style.display = "none";
+ }
+});
diff --git a/js/requete.js b/js/requete.js
new file mode 100644
index 0000000000000000000000000000000000000000..f080bc61d09fdf17e54ed928b725104d5e4e1249
--- /dev/null
+++ b/js/requete.js
@@ -0,0 +1,41 @@
+var formElt = document.querySelector("form");
+var nom = document.getElementById("Nom");
+var prenom = document.getElementById("Prenom");
+var mail = document.getElementById("Mail");
+var tel = document.getElementById("Tel");
+var fonc = document.getElementById("Fonc");
+var prec = document.getElementById("Prec");
+var mess = document.getElementById("Message");
+var rep = document.getElementById("Reponse");
+var footer = document.getElementById("footer");
+
+formElt.addEventListener("submit", function(e) {
+
+ e.preventDefault();
+ var req = new XMLHttpRequest();
+ req.open("POST", "php/recup.php");
+ req.addEventListener("error", function () {
+ // La requête n'a pas réussi à atteindre le serveur
+ console.error("Erreur réseau");
+ });
+ req.send(new FormData(formElt));
+ nom.value = "";
+ prenom.value = "";
+ mail.value = "";
+ tel.value = "";
+ fonc.value = "";
+ mess.value = "";
+ rep.style.visibility = "visible";
+});
+
+fonc.addEventListener("change", function() {
+ if(fonc.value === "Autre")
+ {
+ prec.style.display = "flex";
+ prec.setAttribute('required', '');
+ }
+ else
+ {
+ prec.style.display = "none";
+ }
+})
\ No newline at end of file
diff --git a/js/scroll.js b/js/scroll.js
new file mode 100644
index 0000000000000000000000000000000000000000..318f3a5904d38309fb107b95d621f4fb79599955
--- /dev/null
+++ b/js/scroll.js
@@ -0,0 +1,68 @@
+var btn = document.getElementById("TopButton");
+
+window.addEventListener("scroll", function() {
+ if(window.screenX > 1080)
+ {
+ if (window.scrollY > 500) {
+ btn.style.opacity = "1";
+ btn.style.visibility = "visible";
+ }
+ else {
+ btn.style.opacity = "0";
+ btn.style.visibility = "hidden";
+ }
+ }
+ else
+ {
+ if (window.scrollY > 750) {
+ btn.style.opacity = "1";
+ btn.style.visibility = "visible";
+ }
+ else {
+ btn.style.opacity = "0";
+ btn.style.visibility = "hidden";
+ }
+ }
+});
+
+window.addEventListener("load", function(e) {
+ e.preventDefault();
+ if(window.screenX > 645)
+ {
+ if(window.document.location.href.includes("#C"))
+ {
+ window.scrollBy(0, -200);
+ }
+ else if(window.document.location.href.includes("#Programmation"))
+ {
+ window.scrollBy(0, -170);
+ }
+ else if(window.document.location.href.includes("#"))
+ {
+ window.scrollBy(0, -80);
+ }
+ }
+ else
+ {
+ if(window.document.location.href.includes("#C"))
+ {
+ window.scrollBy(0, -220);
+ }
+ else if(window.document.location.href.includes("#Programmation"))
+ {
+ window.scrollBy(0, -220);
+ }
+ else if(window.document.location.href.includes("#"))
+ {
+ window.scrollBy(0, -120);
+ }
+ }
+});
+
+btn.addEventListener("click", function(e) {
+ e.preventDefault();
+ window.scrollTo({top: 0,
+ left: 0,
+ behavior: 'smooth'
+ });
+});
\ No newline at end of file
diff --git a/pdf/CV_Dimitri_Dupard.pdf b/pdf/CV_Dimitri_Dupard.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..d0f56a67ae716adb0441a018a3a12b4ec4cc9b69
Binary files /dev/null and b/pdf/CV_Dimitri_Dupard.pdf differ
diff --git a/php/recup.php b/php/recup.php
new file mode 100644
index 0000000000000000000000000000000000000000..362930d12692dd4370a4ac8d4726c3781c38e435
--- /dev/null
+++ b/php/recup.php
@@ -0,0 +1,73 @@
+<?php
+
+$mailPerso = "dimitri.dupard@yahoo.fr";
+$mailContact = strtolower(strip_tags($_POST['Mail']));
+$nomContact = ucfirst(strtolower(strip_tags($_POST['Nom'])));
+$prenomContact = ucfirst(strtolower(strip_tags($_POST['Prenom'])));
+$telContact = strip_tags($_POST['Tel']);
+$foncContact = ucfirst(strtolower(strip_tags($_POST['Fonc'])));
+$precisContact = ucfirst(strtolower(strip_tags($_POST['Precis'])));
+$messageContact = strip_tags($_POST['Message']);
+
+if($foncContact == "Autre")
+{
+ if(empty($messageContact))
+ {
+ $reponsePerso = "Nom : $nomContact\nPrénom : $prenomContact\nAdresse mail : $mailContact\nTéléphone : $telContact\nFonction : $precisContact";
+ }
+ else
+ {
+ $reponsePerso = "Nom : $nomContact\nPrénom : $prenomContact\nAdresse mail : $mailContact\nTéléphone : $telContact\nFonction : $precisContact\n\nMessage : $messageContact";
+ }
+}
+else
+{
+ if(empty($messageContact))
+ {
+ $reponsePerso = "Nom : $nomContact\nPrénom : $prenomContact\nAdresse mail : $mailContact\nTéléphone : $telContact\nFonction : $foncContact";
+ }
+ else
+ {
+ $reponsePerso = "Nom : $nomContact\nPrénom : $prenomContact\nAdresse mail : $mailContact\nTéléphone : $telContact\nFonction : $foncContact\n\nMessage : $messageContact";
+ }
+}
+
+$reponseContact = "Bonjour $prenomContact.\nMerci d'avoir laissé vos coordonnées, j'espère que votre visite sur mon site a été profitable. Je reste à votre entière disposition si vous souhaitez de plus amples informations à l'adresse mail $mailPerso .\nCordialement,\nDimitri Dupard.";
+
+mail($mailPerso, "Nouveau Contact", $reponsePerso);
+mail($mailContact, "Réception de vos coordonnées", $reponseContact);
+
+try
+{
+ $bdd = new PDO('mysql:host=localhost;dbname=dupard;charset=utf8', 'dupard', 'Dd77sfr2002');
+}
+catch (Exception $e)
+{
+ die('Erreur : '.$e->getMessage());
+}
+
+if($foncContact != "Autre")
+{
+ if(empty($messageContact))
+ {
+ $bdd->exec("INSERT INTO INFO_FORMULAIRE VALUES ($nomContact, $prenomContact, $mailContact, $telContact, $foncContact, null, null)");
+ }
+ else
+ {
+ $bdd->exec("INSERT INTO INFO_FORMULAIRE VALUES ($nomContact, $prenomContact, $mailContact, $telContact, $foncContact, null, $messageContact)");
+ }
+}
+else
+{
+ if(empty($messageContact))
+ {
+ $bdd->exec("INSERT INTO INFO_FORMULAIRE VALUES ($nomContact, $prenomContact, $mailContact, $telContact, null, $precisContact, null)");
+ }
+ else
+ {
+ $bdd->exec("INSERT INTO INFO_FORMULAIRE VALUES ($nomContact, $prenomContact, $mailContact, $telContact, null, $precisContact, $messageContact)");
+ }
+}
+
+
+?>
\ No newline at end of file