Upd 4

.REMEMBER

@@ -9,4 +9,7 @@ $ ionic generate directive ripple --skip-import
 $ ionic generate service api/user
 
 
+ ionic generate component user-footer
+  ionic generate component cards/home-card
+
 ionic g service services/WrenchService

src/app/compo/menu-card/menu-card.component.html

@@ -0,0 +1,9 @@
+<ion-card class="menu_card">
+  <ion-card-header>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    Here's a small text description for the card content. Nothing more, nothing less.
+  </ion-card-content>
+</ion-card>

src/app/compo/menu-card/menu-card.component.scss

@@ -0,0 +1,7 @@
+.menu_card{
+  //background-image: url('../../../assets/img/myfit_home.jpg');
+  background-image: linear-gradient(to right, blue , green);
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 250px;
+}

src/app/compo/menu-card/menu-card.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { MenuCardComponent } from './menu-card.component';
+
+describe('MenuCardComponent', () => {
+  let component: MenuCardComponent;
+  let fixture: ComponentFixture<MenuCardComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MenuCardComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MenuCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/compo/menu-card/menu-card.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-card',
+  templateUrl: './menu-card.component.html',
+  styleUrls: ['./menu-card.component.scss'],
+})
+export class MenuCardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/compo/user-footer/user-footer.component.html

@@ -0,0 +1,31 @@
+<ion-toolbar>
+  <ion-grid>
+    <ion-row>
+      <ion-col class="footer-col">
+        <ion-button fill="clear" size="small">
+          <ion-icon slot="icon-only" name="home"></ion-icon>
+        </ion-button>
+      </ion-col>
+      <ion-col class="footer-col">
+        <ion-button fill="clear" size="small">
+          <ion-icon slot="icon-only" name="star"></ion-icon>
+        </ion-button>
+      </ion-col>
+      <ion-col class="footer-col">
+        <ion-button fill="clear" size="small">
+          <ion-icon slot="icon-only" name="star"></ion-icon>
+        </ion-button>
+      </ion-col>
+      <ion-col class="footer-col">
+        <ion-button fill="clear" size="small">
+          <ion-icon slot="icon-only" name="star"></ion-icon>
+        </ion-button>
+      </ion-col>
+      <ion-col class="footer-col">
+        <ion-button fill="clear" size="small">
+          <ion-icon slot="icon-only" name="settings"></ion-icon>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-toolbar>

src/app/compo/user-footer/user-footer.component.scss

@@ -0,0 +1,3 @@
+.footer-col{
+  text-align: center;
+}

src/app/compo/user-footer/user-footer.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { UserFooterComponent } from './user-footer.component';
+
+describe('UserFooterComponent', () => {
+  let component: UserFooterComponent;
+  let fixture: ComponentFixture<UserFooterComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserFooterComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/compo/user-footer/user-footer.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-user-footer',
+  templateUrl: './user-footer.component.html',
+  styleUrls: ['./user-footer.component.scss'],
+})
+export class UserFooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/start-page/start-page.page.scss

@@ -6,6 +6,7 @@
     background-size: cover;
     .home_card{
         position: relative;
+        max-width: 400px;
         top:50%;
         .card_sec1{
           background-color:#1a3544;
@@ -24,7 +25,7 @@
         font-weight: bold;
     }
     .start_login{
-
+        background-color: lightgreen;
     }
     .start_signup{
         background-color: lightgreen;

src/app/userpage/user-dash/user-dash.module.ts

@@ -7,7 +7,8 @@ import { IonicModule } from '@ionic/angular';
 import { UserDashPageRoutingModule } from './user-dash-routing.module';
 
 import { UserDashPage } from './user-dash.page';
-
+import { UserFooterComponent } from './../../compo/user-footer/user-footer.component';
+import { MenuCardComponent } from './../../compo/menu-card/menu-card.component';
 @NgModule({
   imports: [
     CommonModule,
@@ -15,6 +16,6 @@ import { UserDashPage } from './user-dash.page';
     IonicModule,
     UserDashPageRoutingModule
   ],
-  declarations: [UserDashPage]
+  declarations: [UserDashPage,UserFooterComponent,MenuCardComponent]
 })
 export class UserDashPageModule {}

src/app/userpage/user-dash/user-dash.page.html

@@ -24,16 +24,7 @@
         <ion-grid>
         <ion-row class="home_box_card">
           <ion-col>
-            <ion-card class="first_card">
+           <app-menu-card />
-              <ion-card-header>
-                <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-              </ion-card-header>
-
-              <ion-card-content>
-                Here's a small text description for the card content. Nothing more, nothing less.
-              </ion-card-content>
-            </ion-card>
-
           </ion-col>
           <ion-col>
 
@@ -110,35 +101,5 @@
 </ion-content>
 
 <ion-footer class="ion-no-border">
-  <ion-toolbar>
+  <app-user-footer />
-    <ion-grid>
-      <ion-row>
-        <ion-col class="footer-col">
-          <ion-button fill="clear" size="small">
-            <ion-icon slot="icon-only" name="home"></ion-icon>
-          </ion-button>
-        </ion-col>
-        <ion-col class="footer-col">
-          <ion-button fill="clear" size="small">
-            <ion-icon slot="icon-only" name="star"></ion-icon>
-          </ion-button>
-        </ion-col>
-        <ion-col class="footer-col">
-          <ion-button fill="clear" size="small">
-            <ion-icon slot="icon-only" name="star"></ion-icon>
-          </ion-button>
-        </ion-col>
-        <ion-col class="footer-col">
-          <ion-button fill="clear" size="small">
-            <ion-icon slot="icon-only" name="star"></ion-icon>
-          </ion-button>
-        </ion-col>
-        <ion-col class="footer-col">
-          <ion-button fill="clear" size="small">
-            <ion-icon slot="icon-only" name="settings"></ion-icon>
-          </ion-button>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </ion-toolbar>
 </ion-footer>

src/app/userpage/user-dash/user-dash.page.scss

@@ -50,6 +50,3 @@ ion-card {
   margin: 10px 5px 5px 5px;
 
 }
-.footer-col{
-  text-align: center;
-}