home page + typo

src/app/app.component.html

@@ -3,4 +3,4 @@
 <app-header-logo *ngIf="router.url != '/signin'"></app-header-logo>
 <app-nav-bar *ngIf="router.url != '/signin'"></app-nav-bar>
 <router-outlet></router-outlet>
-<app-footer *ngIf="router.url != '/signin'"></app-footer>
+<!-- <app-footer *ngIf="router.url != '/signin'"></app-footer> -->

src/app/header/components/nav-bar/nav-bar.component.html

@@ -9,7 +9,7 @@
           aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
       </button>
-      <div class="collapse navbar-collapse justify-content-end" id="nav">
+      <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
           <div class="navbar-nav ">
               <a routerLink="home" routerLinkActive="active-custom" class="nav-link p-4 pe-5 " style="font-size: 21px;">Accueil</a>
               <a routerLink="categories" routerLinkActive="active-custom" class="nav-link p-4 pe-5" style="font-size: 21px;">Categories</a>

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

@@ -1,44 +1,45 @@
 <div class="body">
-    <h1 style = "text-align: center;">Hello {{userName}} !</h1> 
+    <h1 style = "text-align: center; font-family: 'Dancing Script', cursive; font-size: 7vh;">Hello {{userName}} !</h1> 
 
-        <div class="intro p-5 m-3">
+        <div class="intro d-flex justify-content-center pt-4 m-3 "style = "font-size: 2.6vh; font-style:italic;">
-            <span>Bienvenue sur Simpl'eat, l'application indispensable pour un Simplonien comme toi !</span>
+            <span class=" preface">Bienvenue sur Simpl'eat, l'application indispensable pour un Simplonien comme toi !</span>
         </div>
 
         <div class="separation"></div>
 
             <div class="premier_bloc">
-                <img src="assets/imagesAccueil/image_accueil_1.jpg" alt="Photo d'un magnifique repas miam ! ">
+                <img src="assets/imagesAccueil/image_accueil_1 1.png" 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.
+                
+                    <p class="uno">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="ligne-rouge">
-            <div class="separation"></div>
+                <div class="separation2"></div>
-
+            </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 
+                <p class="dos">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 ! ">
+                <img src="assets/imagesAccueil/image_accueil_2 1.png" 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 ! ">
+                <img src="assets/imagesAccueil/image_accueil_3 1.png" alt="Photo d'un magnifique repas miam ! ">
                     
                     <ul>
-                        <p>Sur cette application, plusieurs fonctionnalités s'offre à toi.</p>
+                        <p class="tres">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">
+            <div class = "intro d-flex justify-content-center pt-5 "style = "text-align: center; font-family: 'Dancing Script';font-size: 7vh;">
-                A TOI DE JOUER ! 
+                A toi de jouer !
             </div>
 </div>
 

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

@@ -1,38 +1,165 @@
 .body{
    width: 100%;
-   padding: 15vh;
+   padding: 8vh 20vh;
+}
+
+h1{
+    font-size: 4vh;
+    padding-top: 3vh;
+}
+
+.preface{
+   text-align: center;
+   padding-bottom: 3vh;
 }
 
 .premier_bloc{
     display: flex;
+    align-items: center;
+   
 }
 
 .deuxieme_bloc{
     display: flex;
+    align-items: center;
+    
 }
 
 .troisieme_bloc{
     display: flex;
+    align-items: center;
 }
 
 img{
-    width: 600px;
+   
-    height: 350px;
+    
-    margin-top: 100px;
+    margin: 5vh 0 0 0;
+    border-radius: 10px;
+    width: 100%;
+    max-width: 500px;
+    height: auto;
+   
+    
 }
 
-p{
+.uno{
-    margin: 10px 50px 20px;
+   padding-top: 6vh;
-    padding: 0 30px;
+    padding-left: 6vh;
     text-align: justify;
-    padding-top: 220px;
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
 }
 
+.dos{
+    padding-top: 6vh;
+    padding-right: 6vh;
+    text-align: justify;
+}
+
+.tres{
+    padding-top: 6vh;
+  font-size: 3.5vh;
+}
+
+
+
 .separation{
     display: flex;
     justify-content: flex-start;
     border-bottom: 2px solid #CE0000;
     max-width: 83%;
     padding : 20px;
+}
+
+.ligne-rouge{
+    display: flex;
+    justify-content: flex-end;
+    
+}
+
+.separation2{
+
+    border-bottom: 2px solid #CE0000;
+    max-width: 83%;
+    width: 100%;
+    padding : 20px;
+    
+}
+
+@media only screen and (max-width:1131px) {
+
+    .body{
+        display: flex;
+        justify-content: center;
+        margin: -1vh auto;
+        padding: 3vh;
+        flex-wrap: wrap; 
+    }
+
+    img{
+        width: 100%;
+        max-width: 500px;
+        height: auto;
+        padding-bottom: 5vh;
+        border-radius: 10px;
+        display: flex;
+        justify-content: center;
+    }
+    
+    .premier_bloc{
+        flex-wrap: wrap;
+    }
+    
+    .deuxieme_bloc{
+        flex-wrap: wrap;
+        flex-direction: column-reverse;
+    }
+    
+    .troisieme_bloc{
+        flex-wrap: wrap;
+    }
+
+    .uno{
+        padding-top: 0;
+        padding-left: 0;
+        padding-bottom: 2.5vh;
+        text-align: justify;
+     
+    }
+    
+    .dos{
+        padding-top: 0;
+        padding-right: 0;
+        padding-bottom: 2.5vh;
+        text-align: justify;
+    }
+    
+    .tres{
+        padding-top: 0;
+      font-size: 3.5vh;
+    }
+
+    .separation{
+        display: flex;
+        justify-content: center;
+        border-bottom: 1px solid #CE0000;
+        width: 100%;
+        padding: 0;
+        
+    }
+
+    .ligne-rouge{
+        display: flex;
+        justify-content: center;
+        width: 100%;
+    }
+    
+    .separation2{
+        padding: 0;
+        border-bottom: 1px solid #CE0000;
+        max-width: 83%;
+    }
+
+    
+    
+    
+
 }

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: "http://localhost:8080",
+  apiUrl: "http://localhost:8081",
   tokenKey: "TOKEN-SIMPLEAT"
 };
 

src/index.html

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
+  <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
 </head>
 <body>