wip: all components were wrapped now. Grid structure has been applied to the main wrapper-class "container".

Frontend/src/app/app.component.html

@@ -1,7 +1,13 @@
-<app-top-bar></app-top-bar>
+<div class="container">
-<div class="page-content">
+    <div class="header">
+        <app-top-bar></app-top-bar>
+    </div>
+    <div class="page-content">
         <router-outlet></router-outlet>
+    </div>
+    <div class="footer">
+        <app-bottom-bar></app-bottom-bar>
+    </div>
 </div>
-<app-bottom-bar></app-bottom-bar>
 
 

Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css

@@ -4,8 +4,6 @@
     background-color: #f8f9fa;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
     align-items: center;
 }
 

Frontend/src/app/pages/landingpage/landingpage.component.html

@@ -1,4 +1,6 @@
-<div id="mainComponents">
+<app-hot-deals-widget></app-hot-deals-widget>
+
+<!--<div id="mainComponents">
     <div id="searchContainer">
         <input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
     </div>
@@ -14,3 +16,4 @@
         </div>
     </div>
 </div>
+-->

Frontend/src/styles.css

@@ -104,6 +104,32 @@ label {
     padding-right: 4px;
 }
 
+/* Main Container */
+
+.container {
+    position: fixed;
+    left: 50%;
+    margin-left: -820px;
+    width: 1640px;
+    height: auto;
+    display: grid;
+    grid-template-rows: 70px auto 210px;
+}
+
+.header {
+    grid-row: 1/2;
+}
+
+.page-content {
+    grid-row: 2/3;
+}
+
+.footer {
+    grid-row: 3/4;
+}
+
+/* End of Main Container */
+
 /* Top Bar */
 
 app-top-bar {