page accueil

src/app/pages/home-page/home-page.component.html

@@ -1,13 +1,47 @@
-<h1 style = "text-align: center;">Hello {{userName}} !</h1> 
+<div class="body">
+    <h1 style = "text-align: center;">Hello {{userName}} !</h1> 
 
-<div class="intro">Bienvenue sur Simpl'eat, l'application indispensable pour un Simplonien comme toi ! </div>Bienvenue sur Simpl'eat, l'application indispensable pour un Simplonien comme toi ! 
+        <div class="intro p-5 m-3">
+            <span>Bienvenue sur Simpl'eat, l'application indispensable pour un Simplonien comme toi !</span>
+        </div>
 
-<img src="assets/imagesAccueil/image_accueil_1.PNG" alt="Photo d'un magnifique repas miam ! ">
-<div class="premier_p">Cette application à été conçue dans le but de te permettre de visualiser les différents restaurants aux alentours de l’école SIMPLON située à MONTREUIL.
-Tu pourras choisir choisir selon tes préférences un restaurant en particulier qui convient selon ton envie du jour.
-Une boulangerie, un kebab, une pizzeria ou simplement un magnifique sandwich triangle dans ton cente commercial préféré !</div>
+        <div class="separation"></div>
+
+            <div class="premier_bloc">
+                <img src="assets/imagesAccueil/image_accueil_1.jpg" alt="Photo d'un magnifique repas miam ! ">
+                    <p>Cette application à été conçue dans le but de te permettre de visualiser les différents restaurants aux alentours de l’école SIMPLON située à MONTREUIL.
+                    Tu pourras choisir choisir selon tes préférences un restaurant en particulier qui convient selon ton envie du jour.
+                    Une boulangerie, un kebab, une pizzeria ou simplement un magnifique sandwich triangle dans ton cente commercial préféré !
+                    C'est pas magnifique ça ?</p>
+            </div>
+
+            <div class="separation"></div>
+
+            <div class="deuxieme_bloc">
+                <p>L'idée de cette application vient du fait qu'en tant que provincial, d'arriver dans une nouvelle ville, d'être presque perdu dans un environnement 
+                    qui nous ait inconnu, de ne pas savoir si il y a le meilleur kebab du coin dans les environs ?
+                    Toutes ces pensées nous envahissent et nous ont amener à concevoir ceci pour vous !</p>
+                <img src="assets/imagesAccueil/image_accueil_2.jpg" alt="Photo d'un magnifique repas miam ! ">
+                </div>
+     
+                <div class="separation"></div>
+
+            <div class="troisieme_bloc">
+                <img src="assets/imagesAccueil/image_accueil_3.jpeg" alt="Photo d'un magnifique repas miam ! ">
+                    
+                    <ul>
+                        <p>Sur cette application, plusieurs fonctionnalités s'offre à toi.</p>
+                        <li>Acceder aux différents restaurants répertoriés sur l'application ! </li>
+                        <li>Choisir la catégorie de restaurants qui donne le plus envie ! </li>
+                        <li>Sélectionner et préserver en favoris les restaurants dont tu veux garder l'adresse ! </li>
+                    </ul>
+            </div>
+
+            <div id="bas_de_body">
+                A TOI DE JOUER ! 
+            </div>
+</div>
 
-C'est pas magnifique ça ?
 
 
 

src/app/pages/home-page/home-page.component.scss

@@ -1,7 +1,38 @@
-#demotext {
-    color: #FFFFFF;
-    background: #912C22;
-    text-shadow: 0 0 10px #FFFFFF;
-    color: #FFFFFF;
-    background: #912C22;
-    }
+.body{
+   width: 100%;
+   padding: 15vh;
+}
+
+.premier_bloc{
+    display: flex;
+}
+
+.deuxieme_bloc{
+    display: flex;
+}
+
+.troisieme_bloc{
+    display: flex;
+}
+
+img{
+    width: 600px;
+    height: 350px;
+    margin-top: 100px;
+}
+
+p{
+    margin: 10px 50px 20px;
+    padding: 0 30px;
+    text-align: justify;
+    padding-top: 220px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
+}
+
+.separation{
+    display: flex;
+    justify-content: flex-start;
+    border-bottom: 2px solid #CE0000;
+    max-width: 83%;
+    padding : 20px;
+}