first commit

src/app/app-routing.module.ts

@@ -0,0 +1,141 @@
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./pages/slider/slider.module').then(m => m.SliderPageModule)
+  },
+  {
+    path: 'tabs',
+    loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'home',
+    loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
+  },
+  {
+    path: 'my-course',
+    loadChildren: () => import('./pages/my-course/my-course.module').then(m => m.MyCoursePageModule)
+  },
+  {
+    path: 'inbox',
+    loadChildren: () => import('./pages/inbox/inbox.module').then(m => m.InboxPageModule)
+  },
+  {
+    path: 'transaction',
+    loadChildren: () => import('./pages/transaction/transaction.module').then(m => m.TransactionPageModule)
+  },
+  {
+    path: 'profile',
+    loadChildren: () => import('./pages/profile/profile.module').then(m => m.ProfilePageModule)
+  },
+  {
+    path: 'detail',
+    loadChildren: () => import('./pages/detail/detail.module').then(m => m.DetailPageModule)
+  },
+  {
+    path: 'edit-profile',
+    loadChildren: () => import('./pages/edit-profile/edit-profile.module').then(m => m.EditProfilePageModule)
+  },
+  {
+    path: 'notification',
+    loadChildren: () => import('./pages/notification/notification.module').then(m => m.NotificationPageModule)
+  },
+  {
+    path: 'payment',
+    loadChildren: () => import('./pages/payment/payment.module').then(m => m.PaymentPageModule)
+  },
+  {
+    path: 'new-card',
+    loadChildren: () => import('./pages/new-card/new-card.module').then(m => m.NewCardPageModule)
+  },
+  {
+    path: 'security',
+    loadChildren: () => import('./pages/security/security.module').then(m => m.SecurityPageModule)
+  },
+  {
+    path: 'language',
+    loadChildren: () => import('./pages/language/language.module').then(m => m.LanguagePageModule)
+  },
+  {
+    path: 'privacy',
+    loadChildren: () => import('./pages/privacy/privacy.module').then(m => m.PrivacyPageModule)
+  },
+  {
+    path: 'mentor',
+    loadChildren: () => import('./pages/mentor/mentor.module').then(m => m.MentorPageModule)
+  },
+  {
+    path: 'search',
+    loadChildren: () => import('./pages/search/search.module').then(m => m.SearchPageModule)
+  },
+  {
+    path: 'enroll',
+    loadChildren: () => import('./pages/enroll/enroll.module').then(m => m.EnrollPageModule)
+  },
+  {
+    path: 'course-detail',
+    loadChildren: () => import('./pages/course-detail/course-detail.module').then(m => m.CourseDetailPageModule)
+  },
+  {
+    path: 'call',
+    loadChildren: () => import('./pages/call/call.module').then(m => m.CallPageModule)
+  },
+  {
+    path: 'message',
+    loadChildren: () => import('./pages/message/message.module').then(m => m.MessagePageModule)
+  },
+  {
+    path: 'invite',
+    loadChildren: () => import('./pages/invite/invite.module').then(m => m.InvitePageModule)
+  },
+  {
+    path: 'top-mentors',
+    loadChildren: () => import('./pages/top-mentors/top-mentors.module').then(m => m.TopMentorsPageModule)
+  },
+  {
+    path: 'bookmark',
+    loadChildren: () => import('./pages/bookmark/bookmark.module').then(m => m.BookmarkPageModule)
+  },
+  {
+    path: 'remove-bookmark',
+    loadChildren: () => import('./pages/remove-bookmark/remove-bookmark.module').then(m => m.RemoveBookmarkPageModule)
+  },
+  {
+    path: 'popular',
+    loadChildren: () => import('./pages/popular/popular.module').then(m => m.PopularPageModule)
+  },
+  {
+    path: 'login',
+    loadChildren: () => import('./pages/login/login.module').then(m => m.LoginPageModule)
+  },
+  {
+    path: 'register',
+    loadChildren: () => import('./pages/register/register.module').then(m => m.RegisterPageModule)
+  },
+  {
+    path: 'fill-profile',
+    loadChildren: () => import('./pages/fill-profile/fill-profile.module').then(m => m.FillProfilePageModule)
+  },
+  {
+    path: 'forgot',
+    loadChildren: () => import('./pages/forgot/forgot.module').then(m => m.ForgotPageModule)
+  },
+  {
+    path: 'new-password',
+    loadChildren: () => import('./pages/new-password/new-password.module').then(m => m.NewPasswordPageModule)
+  },
+  {
+    path: 'receipt',
+    loadChildren: () => import('./pages/receipt/receipt.module').then(m => m.ReceiptPageModule)
+  },
+
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -0,0 +1,3 @@
+<ion-app>
+  <ion-router-outlet></ion-router-outlet>
+</ion-app>

src/app/app.component.scss

@@ -0,0 +1 @@
+

src/app/app.component.spec.ts

@@ -0,0 +1,23 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+
+  beforeEach(waitForAsync(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [AppComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+  // TODO: add more tests!
+
+});

src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss'],
+})
+export class AppComponent {
+  constructor() { }
+}

src/app/app.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouteReuseStrategy } from '@angular/router';
+
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
+  bootstrap: [AppComponent],
+})
+export class AppModule { }

src/app/pages/bookmark/bookmark-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { BookmarkPage } from './bookmark.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BookmarkPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class BookmarkPageRoutingModule { }

src/app/pages/bookmark/bookmark.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { BookmarkPageRoutingModule } from './bookmark-routing.module';
+
+import { BookmarkPage } from './bookmark.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BookmarkPageRoutingModule
+  ],
+  declarations: [BookmarkPage]
+})
+export class BookmarkPageModule { }

src/app/pages/bookmark/bookmark.page.html

@@ -0,0 +1,41 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start" (click)="onBack()">
+      <ion-button>
+        <ion-icon name="arrow-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>My Bookmark</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <div class="bg_white" *ngFor="let item of [1,2,3,4,5,6]">
+    <div class="list">
+      <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>
+      <div class="detail">
+        <ion-label class="bg_text">3D Design</ion-label>
+
+        <ion-label class="name">3D Design Illustration</ion-label>
+
+        <ion-label class="price">$48.00 </ion-label>
+
+        <div class="row">
+          <ion-icon name="star-half-outline" color="warning"></ion-icon>
+          <ion-label class="small">4.9</ion-label>
+          <ion-label class="small">|</ion-label>
+          <ion-label class="small">8266 Students</ion-label>
+        </div>
+      </div>
+    </div>
+    <ion-icon slot="end" name="bookmark" class="save" color="primary" (click)="onCancelApointment()"></ion-icon>
+  </div>
+</ion-content>

src/app/pages/bookmark/bookmark.page.scss

@@ -0,0 +1,86 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  ion-toolbar {
+    --background: var(--ion-color-primary);
+
+    ion-icon {
+      color: white;
+    }
+
+    ion-title {
+      color: white;
+    }
+  }
+}
+
+ion-content {
+
+  .bg_white {
+    display: flex;
+    align-items: flex-start;
+    background-color: white;
+    padding: 15px;
+    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    margin-bottom: 20px;
+
+    .list {
+      display: flex;
+      align-items: center;
+
+      .back_image {
+        height: 95px;
+        width: 95px;
+        border-radius: 10px;
+      }
+
+      .detail {
+        margin-left: 10px;
+
+        .bg_text {
+          color: var(--ion-color-primary);
+          background-color: #dfe1f3;
+          font-size: 12px;
+          padding: 2px 5px;
+          border-radius: 5px;
+          width: 80px;
+          text-align: center;
+        }
+
+        .name {
+          font-family: 'bold';
+          margin-top: 5px;
+        }
+
+        .price {
+          margin-top: 3px;
+          color: var(--ion-color-primary);
+          font-family: 'semi-bold';
+        }
+
+        .row {
+          display: flex;
+          align-items: center;
+          margin-top: 3px;
+
+          ion-icon {
+            font-size: 18px;
+          }
+
+          .small {
+            margin-left: 8px;
+            color: grey;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}

src/app/pages/bookmark/bookmark.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BookmarkPage } from './bookmark.page';
+
+describe('BookmarkPage', () => {
+  let component: BookmarkPage;
+  let fixture: ComponentFixture<BookmarkPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [BookmarkPage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BookmarkPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/bookmark/bookmark.page.ts

@@ -0,0 +1,44 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { Router } from '@angular/router';
+import { RemoveBookmarkPage } from './../remove-bookmark/remove-bookmark.page';
+import { ModalController, NavController } from '@ionic/angular';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-bookmark',
+  templateUrl: './bookmark.page.html',
+  styleUrls: ['./bookmark.page.scss'],
+})
+export class BookmarkPage implements OnInit {
+
+  constructor(
+    private navctr: NavController,
+    private router: Router,
+    private modalController: ModalController
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onBack() {
+    this.navctr.back();
+  }
+
+  async onCancelApointment() {
+    const modal = await this.modalController.create({
+      component: RemoveBookmarkPage,
+      cssClass: 'custom_modal_bottom',
+      componentProps: { value: 123 },
+    });
+
+    await modal.present();
+  }
+
+}

src/app/pages/call/call-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CallPage } from './call.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CallPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CallPageRoutingModule { }

src/app/pages/call/call.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CallPageRoutingModule } from './call-routing.module';
+
+import { CallPage } from './call.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CallPageRoutingModule
+  ],
+  declarations: [CallPage]
+})
+export class CallPageModule { }

src/app/pages/call/call.page.html

@@ -0,0 +1,47 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start" (click)="onCancel()">
+      <ion-button>
+        <ion-icon name="arrow-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding main_div">
+  <div class="profile">
+    <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/profile.jpg)'"></div>
+    <div class="title">
+      <ion-label class="head_text"> Jhon Smith </ion-label>
+      <ion-label class="grey_text"> Duration 12:30 </ion-label>
+    </div>
+  </div>
+
+  <div class="btn">
+    <ion-row>
+      <ion-col size="4">
+        <div class="about">
+          <ion-icon name="volume-high-outline"></ion-icon>
+        </div>
+      </ion-col>
+      <ion-col size="4">
+        <div class="about">
+          <ion-icon name="volume-off-outline"></ion-icon>
+        </div>
+      </ion-col>
+      <ion-col size="4">
+        <div class="about">
+          <ion-icon name="call-outline" class="danger" (click)="onCancel()"></ion-icon>
+        </div>
+      </ion-col>
+    </ion-row>
+  </div>
+</ion-content>

src/app/pages/call/call.page.scss

@@ -0,0 +1,90 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  ion-toolbar {
+    --background: var(--ion-color-primary);
+
+    ion-icon {
+      color: white;
+    }
+
+    ion-title {
+      color: white;
+    }
+  }
+}
+
+.main_div {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .profile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 16px;
+    padding-top: 40px;
+    margin-top: 5rem;
+
+    .back_image {
+      height: 120px;
+      width: 120px;
+      border-radius: 100%;
+    }
+
+    .title {
+      margin-bottom: 1rem;
+      display: flex;
+      flex-direction: column;
+
+      .head_text {
+        margin-top: 10px;
+        font-family: 'bold';
+        font-size: 20px;
+      }
+
+      .grey_text {
+        color: #86888f;
+      }
+    }
+  }
+
+  .btn {
+    margin-top: 5rem;
+
+    ion-icon {
+      --background: var(--ion-color-primary);
+      padding: 20px;
+      box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
+      font-size: 25px;
+      border-radius: 100%;
+      margin-bottom: 5px;
+    }
+
+    .danger {
+      background: red;
+      color: #fff;
+    }
+
+    ion-row {
+      margin-top: 1.5rem;
+      width: 100%;
+
+      ion-col {
+        .about {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+      }
+    }
+  }
+}

src/app/pages/call/call.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CallPage } from './call.page';
+
+describe('CallPage', () => {
+  let component: CallPage;
+  let fixture: ComponentFixture<CallPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [CallPage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CallPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/call/call.page.ts

@@ -0,0 +1,30 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NavController } from '@ionic/angular';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-call',
+  templateUrl: './call.page.html',
+  styleUrls: ['./call.page.scss'],
+})
+export class CallPage implements OnInit {
+
+  constructor(
+    private navctr: NavController
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onCancel() {
+    this.navctr.back();
+  }
+
+}

src/app/pages/course-detail/course-detail-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CourseDetailPage } from './course-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CourseDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CourseDetailPageRoutingModule { }

src/app/pages/course-detail/course-detail.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CourseDetailPageRoutingModule } from './course-detail-routing.module';
+
+import { CourseDetailPage } from './course-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CourseDetailPageRoutingModule
+  ],
+  declarations: [CourseDetailPage]
+})
+export class CourseDetailPageModule { }

src/app/pages/course-detail/course-detail.page.html

@@ -0,0 +1,104 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start" (click)="onBack()">
+      <ion-button>
+        <ion-icon name="arrow-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>3D Design Illustartion</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-segment [(ngModel)]="tabs">
+    <ion-segment-button value="on">
+      <ion-label>Lessons</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="done">
+      <ion-label>Certificate</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <div *ngIf="tabs =='on'" class="lesson">
+
+    <div class="sec">
+      <ion-label class="grey">Section 1 - Introduction</ion-label>
+      <ion-label class="color">15 min</ion-label>
+    </div>
+
+    <div class="video" *ngFor="let item of [1,2]">
+      <div class="left">
+        <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
+
+        <div class="text">
+          <ion-label class="bold_text">Why Using Figma ?</ion-label>
+          <ion-label class="grey_text">10 mins</ion-label>
+        </div>
+      </div>
+      <div class="right">
+        <ion-icon name="lock-closed-outline"></ion-icon>
+      </div>
+    </div>
+
+    <div class="sec">
+      <ion-label class="grey">Section 2 - Figma Basic</ion-label>
+      <ion-label class="color">60 min</ion-label>
+    </div>
+
+
+    <div class="video" *ngFor="let item of [1,2,3,4,5,6]">
+      <div class="left">
+        <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
+
+        <div class="text">
+          <ion-label class="bold_text">Why Using Figma ?</ion-label>
+          <ion-label class="grey_text">10 mins</ion-label>
+        </div>
+      </div>
+      <div class="right">
+        <ion-icon name="lock-closed-outline"></ion-icon>
+      </div>
+    </div>
+
+    <div class="sec">
+      <ion-label class="grey">Section 3 - Let's Practice</ion-label>
+      <ion-label class="color">75 min</ion-label>
+    </div>
+
+
+    <div class="video" *ngFor="let item of [1,2,3,4,5,6]">
+      <div class="left">
+        <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
+
+        <div class="text">
+          <ion-label class="bold_text">Why Using Figma ?</ion-label>
+          <ion-label class="grey_text">10 mins</ion-label>
+        </div>
+      </div>
+      <div class="right">
+        <ion-icon name="lock-closed-outline"></ion-icon>
+      </div>
+    </div>
+  </div>
+
+  <div *ngIf="tabs =='done'" class="certificate_tab">
+
+    <div class="image">
+      <div class="bg_image certificate" [style.backgroundImage]="'url(assets/images/certificate.webp)'"></div>
+    </div>
+
+    <div class="button">
+      <ion-label class="text">Download Certificate</ion-label>
+    </div>
+
+  </div>
+
+</ion-content>

src/app/pages/course-detail/course-detail.page.scss

@@ -0,0 +1,193 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  ion-toolbar {
+    --background: var(--ion-color-primary);
+
+    ion-icon {
+      color: white;
+    }
+
+    ion-title {
+      color: white;
+    }
+  }
+}
+
+ion-content {
+
+  .lesson {
+    margin-top: 20px;
+
+    .bold {
+      font-family: 'semi-bold';
+    }
+
+    .color {
+      color: var(--ion-color-primary);
+    }
+
+    .grey {
+      color: grey;
+    }
+
+    .sec {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 10px;
+    }
+
+    .video {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: white;
+      padding: 15px;
+      box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
+      border-radius: 10px;
+      margin-top: 20px;
+
+      .left {
+        display: flex;
+      }
+
+      .men_image {
+        height: 40px;
+        width: 40px;
+        border-radius: 100%;
+      }
+
+      .text {
+        margin-left: 10px;
+      }
+
+      .bold_text {
+        font-size: 16px;
+        font-family: 'bold';
+      }
+
+      .grey_text {
+        font-size: 14px;
+        color: grey;
+      }
+    }
+  }
+
+  .content {
+    background-color: white;
+    padding: 15px;
+    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    margin-top: 20px;
+    width: 100%;
+
+    .flex {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .back_image {
+        height: 60px;
+        width: 60px;
+      }
+
+      .text {
+        margin-left: 10px;
+      }
+
+      .bold_text {
+        font-size: 16px;
+        font-family: 'bold';
+      }
+
+      .grey_text {
+        margin-top: 5px;
+        font-size: 14px;
+        color: grey;
+      }
+
+      .progress {
+        margin-top: 5px;
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        .stage {
+          margin-left: 5px;
+          font-size: 12px;
+          color: grey;
+        }
+      }
+
+
+      .label {
+        display: flex;
+        margin-top: 5px;
+
+        .color_text {
+          color: var(--ion-color-primary);
+          font-size: 15px;
+          font-family: 'semi-bold';
+
+          span {
+            color: grey;
+            font-size: 14px;
+          }
+        }
+
+        .action {
+          margin-left: 10px;
+          border: 1px solid #4B5DFA;
+          padding: 2px 10px;
+          font-size: 13px;
+          color: #4B5DFA;
+          text-align: center;
+          border-radius: 5px;
+        }
+
+        .green_text {
+          margin-left: 10px;
+          border: 1px solid #2dd36f;
+          padding: 2px 10px;
+          font-size: 13px;
+          color: #2dd36f;
+          text-align: center;
+          border-radius: 5px;
+        }
+
+      }
+    }
+  }
+
+  .certificate_tab {
+
+    .image {
+      margin: 20px 0;
+
+      .certificate {
+        width: 100%;
+        height: 300px;
+      }
+    }
+
+    .button {
+      background-color: var(--ion-color-primary);
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      border-radius: 30px;
+      padding: 12px 0;
+
+      .text {
+        color: white;
+      }
+    }
+  }
+}

src/app/pages/course-detail/course-detail.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CourseDetailPage } from './course-detail.page';
+
+describe('CourseDetailPage', () => {
+  let component: CourseDetailPage;
+  let fixture: ComponentFixture<CourseDetailPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [CourseDetailPage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CourseDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/course-detail/course-detail.page.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NavController } from '@ionic/angular';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-course-detail',
+  templateUrl: './course-detail.page.html',
+  styleUrls: ['./course-detail.page.scss'],
+})
+export class CourseDetailPage implements OnInit {
+
+  tabs: any = 'on';
+
+  constructor(
+    private navctr: NavController
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onBack() {
+    this.navctr.back();
+  }
+
+}

src/app/pages/detail/detail-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { DetailPage } from './detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class DetailPageRoutingModule { }

src/app/pages/detail/detail.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { DetailPageRoutingModule } from './detail-routing.module';
+
+import { DetailPage } from './detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    DetailPageRoutingModule
+  ],
+  declarations: [DetailPage]
+})
+export class DetailPageModule { }

src/app/pages/detail/detail.page.html

@@ -0,0 +1,234 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-content>
+  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p4.jpg)'">
+    <div class="ion-padding">
+      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
+    </div>
+  </div>
+
+  <div class="ion-padding">
+    <div class="flex">
+      <ion-label class="bold_text">Intro UI/UX Design</ion-label>
+      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>
+    </div>
+
+    <div class="row">
+      <ion-label class="bg_text">3D Design</ion-label>
+      <div class="rate">
+        <ion-icon name="star-half-outline" color="warning"></ion-icon>
+        <ion-label class="review">4.8 (4478 reviews)</ion-label>
+      </div>
+    </div>
+
+    <ion-label class="color_text">$40</ion-label>
+
+    <div class="items">
+      <div class="stud">
+        <ion-icon slot="start" name="people" color="primary"></ion-icon>
+        <ion-label>9876 Students</ion-label>
+      </div>
+      <div class="stud">
+        <ion-icon slot="start" name="time" color="primary"></ion-icon>
+        <ion-label>2.5 hours</ion-label>
+      </div>
+      <div class="stud">
+        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>
+        <ion-label>Certificate</ion-label>
+      </div>
+    </div>
+
+    <ion-segment [(ngModel)]="tabs">
+      <ion-segment-button value="about">
+        <ion-label>About</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="lesson">
+        <ion-label>Lessons</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="review">
+        <ion-label>Reviews</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+
+    <div *ngIf="tabs =='about'" class="about">
+      <ion-label class="head_text">Mentor</ion-label>
+
+      <div class="mentor" (click)="onMentor()">
+        <div class="left">
+          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p3.jpg)'"></div>
+          <div style="margin-left: 10px;">
+            <ion-label class="bold">Jonathon Williams</ion-label>
+            <ion-label class="grey">Senier UI/UX designer at google</ion-label>
+          </div>
+        </div>
+        <ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>
+      </div>
+
+      <ion-label class="head_text">About Course</ion-label>
+
+      <ion-label class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolor, quasi
+        commodi
+      </ion-label>
+
+      <ion-label class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolor, quasi
+        commodi
+      </ion-label>
+
+      <ion-label class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolor, quasi
+        commodi
+      </ion-label>
+
+      <ion-label class="head_text">Tools</ion-label>
+
+      <ion-label>Figma</ion-label>
+    </div>
+
+    <div *ngIf="tabs =='lesson'" class="lesson">
+      <div class="flex">
+        <ion-label class="bold">Most Popular Courses</ion-label>
+        <ion-label class="color">See all</ion-label>
+      </div>
+
+      <div class="sec">
+        <ion-label class="grey">Section 1 - Introduction</ion-label>
+        <ion-label class="color">15 min</ion-label>
+      </div>
+
+      <div class="video" *ngFor="let item of [1,2]">
+        <div class="left">
+          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
+
+          <div class="text">
+            <ion-label class="bold_text">Why Using Figma ?</ion-label>
+            <ion-label class="grey_text">10 mins</ion-label>
+          </div>
+        </div>
+        <div class="right">
+          <ion-icon name="lock-closed-outline"></ion-icon>
+        </div>
+      </div>
+
+      <div class="sec">
+        <ion-label class="grey">Section 2 - Figma Basic</ion-label>
+        <ion-label class="color">60 min</ion-label>
+      </div>
+
+
+      <div class="video" *ngFor="let item of [1,2,3,4,5,6]">
+        <div class="left">
+          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
+
+          <div class="text">
+            <ion-label class="bold_text">Why Using Figma ?</ion-label>
+            <ion-label class="grey_text">10 mins</ion-label>
+          </div>
+        </div>
+        <div class="right">
+          <ion-icon name="lock-closed-outline"></ion-icon>
+        </div>
+      </div>
+
+      <div class="sec">
+        <ion-label class="grey">Section 3 - Let's Practice</ion-label>
+        <ion-label class="color">75 min</ion-label>
+      </div>
+
+
+      <div class="video" *ngFor="let item of [1,2,3,4,5,6]">
+        <div class="left">
+          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
+
+          <div class="text">
+            <ion-label class="bold_text">Why Using Figma ?</ion-label>
+            <ion-label class="grey_text">10 mins</ion-label>
+          </div>
+        </div>
+        <div class="right">
+          <ion-icon name="lock-closed-outline"></ion-icon>
+        </div>
+      </div>
+    </div>
+
+    <div *ngIf="tabs =='review'" class="review_tab">
+      <div class="total">
+        <div class="star-rate">
+          <ion-icon name="star-half-outline" color="warning"></ion-icon>
+          <ion-label class="bold">4.8 (5456 Reviews)</ion-label>
+        </div>
+        <ion-label class="color">See all</ion-label>
+      </div>
+
+      <div class="story-item">
+        <div class="menu">
+          <div class="text">
+            <div class="select show">
+              <ion-icon slot="start" name="star" color="light" class="star_icon"></ion-icon>
+              <ion-label class="rate_num white">All</ion-label>
+            </div>
+            <div class="select">
+              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>
+              <ion-label class="rate_num">1</ion-label>
+            </div>
+            <div class="select">
+              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>
+              <ion-label class="rate_num">2</ion-label>
+            </div>
+            <div class="select">
+              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>
+              <ion-label class="rate_num">3</ion-label>
+            </div>
+            <div class="select">
+              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>
+              <ion-label class="rate_num">4</ion-label>
+            </div>
+            <div class="select">
+              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>
+              <ion-label class="rate_num">5</ion-label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="reviw_list" *ngFor="let item of [1,2,3,4,5]">
+        <div class="profile">
+          <div class="left">
+            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>
+            <div style="margin-left: 10px;">
+              <ion-label class="bold">Jonathon Williams</ion-label>
+            </div>
+          </div>
+          <div class="right">
+            <div class="select">
+              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>
+              <ion-label class="rate_num">5</ion-label>
+            </div>
+            <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>
+          </div>
+        </div>
+        <ion-label>The course is very good. the experience of the menter is very clear and easy to understand
+        </ion-label>
+
+        <div class="like">
+          <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>
+          <ion-label class="count">330</ion-label>
+          <ion-label class="time">2 Days ago</ion-label>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <div class="button" (click)="onEnroll()">
+      <ion-label class="text">Enroll Course - $40</ion-label>
+    </div>
+  </ion-toolbar>
+</ion-footer>

src/app/pages/detail/detail.page.scss

@@ -0,0 +1,392 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-content {
+  .back_image {
+    width: 100%;
+    height: 230px;
+
+    .back {
+      font-size: 25px;
+      color: white;
+    }
+  }
+
+  .flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    ion-icon {
+      font-size: 22px;
+    }
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+
+    .bg_text {
+      color: var(--ion-color-primary);
+      background: #dfe1f3;
+      font-size: 12px;
+      padding: 2px 5px;
+      border-radius: 5px;
+      margin-right: 10px;
+    }
+
+    .rate {
+      display: flex;
+      align-items: center;
+
+      .review {
+        margin-left: 5px;
+      }
+    }
+  }
+
+  .color_text {
+    margin-top: 10px;
+    font-size: 22px;
+    font-family: 'semi-bold';
+    color: var(--ion-color-primary);
+  }
+
+  .items {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid lightgrey;
+    padding-bottom: 10px;
+
+    .stud {
+      display: flex;
+      align-items: center;
+
+      ion-icon {
+        margin-right: 5px;
+      }
+
+      ion-label {
+        color: grey;
+      }
+    }
+  }
+
+  .about {
+    margin-top: 10px;
+
+    .head_text {
+      font-size: 18px;
+      font-family: 'semi-bold';
+      margin-bottom: 10px;
+    }
+
+    .mentor {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+
+      .left {
+        display: flex;
+
+        .men_image {
+          height: 50px;
+          width: 50px;
+          border-radius: 100%;
+        }
+
+        .bold {
+          font-family: 'semi-bold';
+        }
+
+        .grey {
+          color: grey;
+          font-size: 14px;
+        }
+      }
+
+      ion-icon {
+        font-size: 25px;
+      }
+    }
+
+    .description {
+      color: grey;
+      margin-bottom: 5px;
+    }
+  }
+
+  .lesson {
+    margin-top: 20px;
+
+    .bold {
+      font-family: 'semi-bold';
+    }
+
+    .color {
+      color: var(--ion-color-primary);
+    }
+
+    .grey {
+      color: grey;
+    }
+
+    .sec {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 10px;
+    }
+
+    .video {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: white;
+      padding: 15px;
+      box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
+      border-radius: 10px;
+      margin-top: 20px;
+
+      .left {
+        display: flex;
+      }
+
+      .men_image {
+        height: 40px;
+        width: 40px;
+        border-radius: 100%;
+      }
+
+      .text {
+        margin-left: 10px;
+      }
+
+      .bold_text {
+        font-size: 16px;
+        font-family: 'bold';
+      }
+
+      .grey_text {
+        font-size: 14px;
+        color: grey;
+      }
+    }
+  }
+
+  .review_tab {
+    margin-top: 20px;
+
+    .total {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .star-rate {
+        display: flex;
+        align-items: center;
+
+        .bold {
+          font-size: 17px;
+          font-family: 'semi-bold';
+          margin-left: 5px;
+        }
+      }
+
+      .color {
+        color: var(--ion-color-primary);
+        font-size: 14px;
+      }
+    }
+
+
+    .story-item {
+      overflow: scroll;
+      display: flex;
+      flex-direction: row;
+      margin-top: 20px;
+
+      .menu {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+
+        .item {
+          padding: 5px;
+          margin: 5px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+
+          ion-thumbnail {
+            border-radius: 15px;
+            width: max-content;
+            height: 60px;
+            width: 60px;
+            --border-radius: 50%;
+          }
+
+          ion-label {
+            font-size: 14px;
+            font-family: "medium";
+            color: var(--ion-color-medium);
+          }
+        }
+
+        .text {
+
+          display: flex;
+          align-items: center;
+          text-align: center;
+
+          .select {
+            display: flex;
+            align-items: center;
+            border: 1px solid var(--ion-color-primary);
+            border-radius: 20px;
+            padding: 2px 15px;
+            margin-right: 10px;
+
+            .rate_num {
+              margin-left: 5px;
+              color: var(--ion-color-primary);
+            }
+          }
+
+          .show {
+            background-color: var(--ion-color-primary);
+          }
+
+          .white {
+            color: white !important;
+          }
+
+          .choice {
+            display: flex;
+          }
+        }
+      }
+    }
+
+    .reviw_list {
+      margin-top: 25px;
+
+      .profile {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          .men_image {
+            height: 40px;
+            width: 40px;
+            border-radius: 100%;
+          }
+
+
+          .bold {
+            font-family: 'semi-bold';
+          }
+
+          .grey {
+            color: grey;
+            font-size: 14px;
+          }
+        }
+
+        .right {
+          display: flex;
+          align-items: center;
+
+          .select {
+            display: flex;
+            align-items: center;
+            border: 1px solid var(--ion-color-primary);
+            border-radius: 20px;
+            padding: 2px 15px;
+            margin-right: 10px;
+
+            .rate_num {
+              margin-left: 5px;
+              color: var(--ion-color-primary);
+            }
+          }
+
+          ion-icon {
+            font-size: 20px;
+          }
+        }
+      }
+
+      .like {
+        display: flex;
+        align-items: center;
+        margin-top: 10px;
+
+        .heart {
+          font-size: 25px;
+          margin-right: 5px;
+        }
+
+        .count {
+          margin-right: 10px;
+        }
+
+        .time {
+          color: grey;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+
+
+  .bold_text {
+    font-size: 20px;
+    font-family: 'bold';
+  }
+}
+
+
+ion-footer {
+  --background: white;
+
+  ion-toolbar {
+    --border-width: 0px;
+    padding: 10px;
+    align-items: center;
+
+    ion-icon {
+      color: white;
+      font-size: 25px;
+    }
+
+    .button {
+      background-color: var(--ion-color-primary);
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      border-radius: 30px;
+      padding: 12px 0;
+
+      .text {
+        color: white;
+      }
+    }
+  }
+}

src/app/pages/detail/detail.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { DetailPage } from './detail.page';
+
+describe('DetailPage', () => {
+  let component: DetailPage;
+  let fixture: ComponentFixture<DetailPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DetailPage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/detail/detail.page.ts

@@ -0,0 +1,42 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-detail',
+  templateUrl: './detail.page.html',
+  styleUrls: ['./detail.page.scss'],
+})
+export class DetailPage implements OnInit {
+
+  tabs = 'about';
+
+  constructor(
+    private navctr: NavController,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onBack() {
+    this.navctr.back();
+  }
+
+  onMentor() {
+    this.router.navigate(['mentor']);
+  }
+
+  onEnroll() {
+    this.router.navigate(['enroll']);
+  }
+
+}

src/app/pages/edit-profile/edit-profile-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EditProfilePage } from './edit-profile.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EditProfilePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EditProfilePageRoutingModule { }

src/app/pages/edit-profile/edit-profile.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EditProfilePageRoutingModule } from './edit-profile-routing.module';
+
+import { EditProfilePage } from './edit-profile.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EditProfilePageRoutingModule
+  ],
+  declarations: [EditProfilePage]
+})
+export class EditProfilePageModule { }

src/app/pages/edit-profile/edit-profile.page.html

@@ -0,0 +1,61 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start" (click)="onBack()">
+      <ion-button>
+        <ion-icon name="arrow-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Edit Profile</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-item lines="none">
+    <ion-input type="text" placeholder="Jaydeep Hirani"></ion-input>
+  </ion-item>
+
+  <ion-item lines="none">
+    <ion-input type="text" placeholder="12/08/1998"></ion-input>
+  </ion-item>
+
+  <ion-item lines="none">
+    <ion-input type="text" placeholder="jaydeephirani@initappz.com"></ion-input>
+  </ion-item>
+
+  <div class="flex">
+    <ion-label>India</ion-label>
+    <ion-icon name="caret-down-outline"></ion-icon>
+  </div>
+
+
+  <ion-item lines="none">
+    <ion-input type="text" placeholder="+91 8190908181"></ion-input>
+  </ion-item>
+
+
+  <div class="flex">
+    <ion-label>Male</ion-label>
+    <ion-icon name="caret-down-outline"></ion-icon>
+  </div>
+
+  <div class="flex" style="margin-top: 20px;">
+    <ion-label>Student</ion-label>
+    <ion-icon name="caret-down-outline"></ion-icon>
+  </div>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <div class="button" (click)="onBack()">
+      <ion-label class="text">Update</ion-label>
+    </div>
+  </ion-toolbar>
+</ion-footer>

src/app/pages/edit-profile/edit-profile.page.scss

@@ -0,0 +1,82 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  ion-toolbar {
+    --background: var(--ion-color-primary);
+
+    ion-icon {
+      color: white;
+    }
+
+    ion-title {
+      color: white;
+    }
+  }
+}
+
+ion-content {
+
+  ion-item {
+    margin-top: 20px;
+    --background: #f7f7f7;
+    border-radius: 10px;
+    margin-bottom: 24px;
+
+    ion-input {
+      --padding-start: 10px;
+      font-family: "regular";
+      height: 50px;
+    }
+
+    ion-icon {
+      font-size: 22px;
+    }
+  }
+
+  .flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #f7f7f7;
+    border-radius: 10px;
+    padding: 15px 25px;
+
+    ion-label {
+      color: grey;
+    }
+  }
+}
+
+ion-footer {
+  --background: white;
+
+  ion-toolbar {
+    --border-width: 0px;
+    padding: 10px;
+    align-items: center;
+
+    ion-icon {
+      color: white;
+      font-size: 25px;
+    }
+
+    .button {
+      background-color: var(--ion-color-primary);
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      border-radius: 30px;
+      padding: 12px 0;
+
+      .text {
+        color: white;
+      }
+    }
+  }
+}

src/app/pages/edit-profile/edit-profile.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EditProfilePage } from './edit-profile.page';
+
+describe('EditProfilePage', () => {
+  let component: EditProfilePage;
+  let fixture: ComponentFixture<EditProfilePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [EditProfilePage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EditProfilePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/edit-profile/edit-profile.page.ts

@@ -0,0 +1,30 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NavController } from '@ionic/angular';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-edit-profile',
+  templateUrl: './edit-profile.page.html',
+  styleUrls: ['./edit-profile.page.scss'],
+})
+export class EditProfilePage implements OnInit {
+
+  constructor(
+    private navctr: NavController
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onBack() {
+    this.navctr.back();
+  }
+
+}

src/app/pages/enroll/enroll-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EnrollPage } from './enroll.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EnrollPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EnrollPageRoutingModule { }

src/app/pages/enroll/enroll.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EnrollPageRoutingModule } from './enroll-routing.module';
+
+import { EnrollPage } from './enroll.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EnrollPageRoutingModule
+  ],
+  declarations: [EnrollPage]
+})
+export class EnrollPageModule { }

src/app/pages/enroll/enroll.page.html

@@ -0,0 +1,84 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start" (click)="onBack()">
+      <ion-button>
+        <ion-icon name="arrow-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Payment</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+
+  <ion-label class="head_text">Choose payment methods</ion-label>
+
+  <div class="flex">
+    <div style="display: flex; align-items: center;">
+      <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/paypal.png)'"></div>
+      <div class="text">
+        <ion-label class="bold_text">Paypal</ion-label>
+      </div>
+    </div>
+    <div>
+      <ion-icon name="ellipse-outline"></ion-icon>
+    </div>
+  </div>
+
+  <div class="flex">
+    <div style="display: flex; align-items: center;">
+      <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/google.png)'"></div>
+      <div class="text">
+        <ion-label class="bold_text">Google Pay</ion-label>
+      </div>
+    </div>
+    <div>
+      <ion-icon name="ellipse-outline"></ion-icon>
+    </div>
+  </div>
+
+  <div class="flex">
+    <div style="display: flex; align-items: center;">
+      <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/apple.png)'"></div>
+      <div class="text">
+        <ion-label class="bold_text">Apple Pay</ion-label>
+      </div>
+    </div>
+    <div>
+      <ion-icon name="ellipse-outline"></ion-icon>
+    </div>
+  </div>
+
+  <div class="flex">
+    <div style="display: flex; align-items: center;">
+      <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/visa.png)'"></div>
+      <div class="text">
+        <ion-label class="bold_text">**** **** **** 8998</ion-label>
+      </div>
+    </div>
+    <div>
+      <ion-icon name="radio-button-on-outline" color="primary"></ion-icon>
+    </div>
+  </div>
+
+  <ion-button expand="full" class="add_button" shape="round" (click)="onAddCard()">
+    Add New Card
+  </ion-button>
+
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <div class="button" (click)="onCourses()">
+      <ion-label class="text">Enroll</ion-label>
+    </div>
+  </ion-toolbar>
+</ion-footer>

src/app/pages/enroll/enroll.page.scss

@@ -0,0 +1,94 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  ion-toolbar {
+    --background: var(--ion-color-primary);
+
+    ion-icon {
+      color: white;
+    }
+
+    ion-title {
+      color: white;
+    }
+  }
+}
+
+ion-content {
+
+  .head_text {
+    font-size: 18px;
+    font-family: 'semi-bold';
+    margin-bottom: 20px;
+  }
+
+  .flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: white;
+    padding: 15px;
+    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    margin-bottom: 20px;
+
+    .back_image {
+      height: 35px;
+      width: 35px;
+    }
+
+    .text {
+      margin-left: 10px;
+    }
+
+    .bold_text {
+      font-size: 16px;
+      font-family: 'bold';
+    }
+
+    .grey_text {
+      font-size: 14px;
+      color: grey;
+    }
+  }
+
+  .add_button {
+    --background: #d9daeb;
+    color: var(--ion-color-primary);
+    font-family: 'semi-bold';
+  }
+}
+
+ion-footer {
+  --background: white;
+
+  ion-toolbar {
+    --border-width: 0px;
+    padding: 10px;
+    align-items: center;
+
+    ion-icon {
+      color: white;
+      font-size: 25px;
+    }
+
+    .button {
+      background-color: var(--ion-color-primary);
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      border-radius: 30px;
+      padding: 12px 0;
+
+      .text {
+        color: white;
+      }
+    }
+  }
+}

src/app/pages/enroll/enroll.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EnrollPage } from './enroll.page';
+
+describe('EnrollPage', () => {
+  let component: EnrollPage;
+  let fixture: ComponentFixture<EnrollPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [EnrollPage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EnrollPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/enroll/enroll.page.ts

@@ -0,0 +1,40 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { Router } from '@angular/router';
+import { NavController } from '@ionic/angular';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-enroll',
+  templateUrl: './enroll.page.html',
+  styleUrls: ['./enroll.page.scss'],
+})
+export class EnrollPage implements OnInit {
+
+  constructor(
+    private navctr: NavController,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onBack() {
+    this.navctr.back();
+  }
+
+  onAddCard() {
+
+  }
+
+  onCourses() {
+    this.router.navigate(['tabs/tab2'])
+  }
+
+}

src/app/pages/fill-profile/fill-profile-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FillProfilePage } from './fill-profile.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FillProfilePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FillProfilePageRoutingModule { }

src/app/pages/fill-profile/fill-profile.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FillProfilePageRoutingModule } from './fill-profile-routing.module';
+
+import { FillProfilePage } from './fill-profile.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FillProfilePageRoutingModule
+  ],
+  declarations: [FillProfilePage]
+})
+export class FillProfilePageModule { }

src/app/pages/fill-profile/fill-profile.page.html

@@ -0,0 +1,39 @@
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+    <ion-title>Confirm Account</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <div class="profile">
+    <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/profile.jpg)'">
+    </div>
+  </div>
+
+  <ion-item lines="none">
+    <ion-input type="text" placeholder="Jaydeep Hirani"></ion-input>
+  </ion-item>
+
+  <ion-item lines="none">
+    <ion-input type="text" placeholder="12/08/1998"></ion-input>
+  </ion-item>
+
+  <ion-item lines="none">
+    <ion-input type="text" placeholder="jaydeephirani@initappz.com"></ion-input>
+  </ion-item>
+
+  <ion-item lines="none">
+    <ion-input type="text" placeholder="+91 8190908181"></ion-input>
+  </ion-item>
+
+  <ion-button expand="block" (click)="onHome()">
+    Continue
+  </ion-button>
+
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    
+  </ion-toolbar>
+</ion-footer>

src/app/pages/fill-profile/fill-profile.page.scss

@@ -0,0 +1,107 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  ion-toolbar {
+    --background: var(--ion-color-primary);
+
+    ion-icon {
+      color: white;
+    }
+
+    ion-title {
+      color: white;
+    }
+  }
+}
+
+ion-content {
+
+  .profile {
+    display: flex;
+    justify-content: center;
+
+    .back_image {
+      height: 90px;
+      width: 90px;
+      border-radius: 100%;
+      position: relative;
+
+      .icon {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+
+        ion-icon {
+          background: var(--ion-color-primary);
+          color: white;
+          padding: 5px;
+          border-radius: 100%;
+        }
+      }
+    }
+  }
+
+  ion-item {
+    margin-top: 16px;
+    --background: #f7f7f7;
+    border-radius: 10px;
+    margin-bottom: 24px;
+
+    ion-input {
+      --padding-start: 10px;
+      font-family: "regular";
+      height: 50px;
+    }
+
+    ion-icon {
+      font-size: 22px;
+    }
+  }
+
+  .flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #f7f7f7;
+    border-radius: 10px;
+    padding: 15px 25px;
+
+    ion-label {
+      color: grey;
+    }
+  }
+}
+
+ion-footer {
+  --background: white;
+
+  ion-toolbar {
+    --border-width: 0px;
+    padding: 10px;
+    align-items: center;
+
+    ion-icon {
+      color: white;
+      font-size: 25px;
+    }
+
+    .button {
+      background-color: var(--ion-color-primary);
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      border-radius: 30px;
+      padding: 12px 0;
+
+      .text {
+        color: white;
+      }
+    }
+  }
+}

src/app/pages/fill-profile/fill-profile.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { FillProfilePage } from './fill-profile.page';
+
+describe('FillProfilePage', () => {
+  let component: FillProfilePage;
+  let fixture: ComponentFixture<FillProfilePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [FillProfilePage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FillProfilePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/fill-profile/fill-profile.page.ts

@@ -0,0 +1,30 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-fill-profile',
+  templateUrl: './fill-profile.page.html',
+  styleUrls: ['./fill-profile.page.scss'],
+})
+export class FillProfilePage implements OnInit {
+
+  constructor(
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onHome() {
+   // this.router.navigate(['tabs/tab1']);
+  }
+
+}

src/app/pages/forgot/forgot-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ForgotPage } from './forgot.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ForgotPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ForgotPageRoutingModule { }

src/app/pages/forgot/forgot.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ForgotPageRoutingModule } from './forgot-routing.module';
+
+import { ForgotPage } from './forgot.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ForgotPageRoutingModule
+  ],
+  declarations: [ForgotPage]
+})
+export class ForgotPageModule { }

src/app/pages/forgot/forgot.page.html

@@ -0,0 +1,43 @@
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+
+  <div *ngIf="tab == 1" class="ion-padding">
+
+    <ion-label class="welcome_lbl">Forgot password</ion-label>
+
+    <ion-label class="simp_lbl">Select which contact details should we use to reset your password:</ion-label>
+
+    <ion-item lines="none">
+      <ion-icon slot="start" name="mail-outline"></ion-icon>
+      <ion-label (click)="tab = 2">Via email</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+
+    <ion-item lines="none">
+      <ion-icon slot="start" name="phone-portrait-outline"></ion-icon>
+      <ion-label>Via sms</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+  </div>
+
+  <div *ngIf="tab == 2" class="ion-padding">
+
+    <ion-label class="welcome_lbl">Forgot password</ion-label>
+
+    <ion-label class="simp_lbl">Code has been sent to the your registered email</ion-label>
+
+    <ion-item lines="none">
+      <ion-input type="email" placeholder="Enter Code"></ion-input>
+    </ion-item>
+
+    <ion-button (click)="onPassword()" expand="block">
+      Continue
+    </ion-button>
+  </div>
+
+</ion-content>

src/app/pages/forgot/forgot.page.scss

@@ -0,0 +1,67 @@
+ion-header {
+  ion-toolbar {
+    --background: white;
+  }
+}
+
+ion-content {
+  .welcome_lbl {
+    font-size: 32px;
+    font-family: "bold";
+    margin-top: 3rem;
+  }
+
+  .simp_lbl {
+    margin-top: 16px;
+    letter-spacing: 1.2;
+  }
+
+  ion-item {
+    margin-top: 3.5rem;
+    --background: #f7f7f7;
+    border-radius: 10px;
+    margin-bottom: 24px;
+
+    ion-label {
+      font-size: 16px;
+    }
+
+    ion-icon {
+      font-size: 22px;
+    }
+  }
+
+  ion-button {
+    --border-radius: 10px;
+    margin-top: 2.5rem;
+    height: 50px;
+  }
+
+  .reset {
+    margin-top: 10rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+
+    ion-icon {
+      font-size: 60px;
+      margin-bottom: 2rem;
+    }
+
+    .code_lbl {
+      font-family: "bold";
+      font-size: 24px;
+    }
+
+    .simp_lbl {
+      letter-spacing: 1.2;
+    }
+
+    .done {
+      height: 50px;
+      width: 100px;
+    }
+  }
+}

src/app/pages/forgot/forgot.page.spec.ts

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

src/app/pages/forgot/forgot.page.ts

@@ -0,0 +1,33 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-forgot',
+  templateUrl: './forgot.page.html',
+  styleUrls: ['./forgot.page.scss'],
+})
+export class ForgotPage implements OnInit {
+
+
+  tab = 1
+
+  constructor(
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onPassword() {
+    this.router.navigate(['new-password']);
+  }
+
+}

src/app/pages/home/home-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { HomePage } from './home.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class HomePageRoutingModule { }

src/app/pages/home/home.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { HomePageRoutingModule } from './home-routing.module';
+
+import { HomePage } from './home.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    HomePageRoutingModule
+  ],
+  declarations: [HomePage]
+})
+export class HomePageModule { }

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

@@ -0,0 +1,89 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <div class="heading">
+      <div class="left">
+        <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/profile.jpg)'"></div>
+        <div>
+          <ion-label class="grey_text">Good Morning</ion-label>
+          <ion-label class="bold_text">Jaydeep Hirani</ion-label>
+        </div>
+      </div>
+      <div class="right">
+        <ion-icon name="notifications-outline" (click)="onNotification()"></ion-icon>
+        <ion-icon name="bookmark-outline" (click)="onBookmark()"></ion-icon>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+
+  <div class="search_box" (click)="onSearch()">
+    <ion-icon slot="start" name="search"></ion-icon>
+    <ion-label>Search</ion-label>
+  </div>
+
+  <div class="offer">
+    <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/offer.webp)'"></div>
+  </div>
+
+  <div class="flex">
+    <ion-label class="bold_text">Top Mentors</ion-label>
+    <ion-label class="color_text" (click)="onTopMentors()">See all</ion-label>
+  </div>
+
+  <div class="story-item">
+    <div class="menu">
+      <div class="item" *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
+        <ion-thumbnail> <img src="assets/images/p1.jpg" /> </ion-thumbnail>
+        <ion-label>Bob</ion-label>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex">
+    <ion-label class="bold_text">Most Popular Courses</ion-label>
+    <ion-label class="color_text" (click)="onPopular()">See all</ion-label>
+  </div>
+
+  <div class="story-item">
+    <div class="menu">
+      <div class="text">
+        <ion-label class="select">All</ion-label>
+        <ion-label>Design</ion-label>
+        <ion-label>Business</ion-label>
+        <ion-label>Education</ion-label>
+        <ion-label>Finance</ion-label>
+      </div>
+    </div>
+  </div>
+
+  <div class="bg_white" *ngFor="let item of [1,2,3,4,5,6]" (click)="onDetails()">
+    <div class="list">
+      <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>
+      <div class="detail">
+        <ion-label class="bg_text">3D Design</ion-label>
+
+        <ion-label class="name">3D Design Illustration</ion-label>
+
+        <ion-label class="price">$48.00 </ion-label>
+
+        <div class="row">
+          <ion-icon name="star-half-outline" color="warning"></ion-icon>
+          <ion-label class="small">4.9</ion-label>
+          <ion-label class="small">|</ion-label>
+          <ion-label class="small">8266 Students</ion-label>
+        </div>
+      </div>
+    </div>
+    <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>
+  </div>
+</ion-content>

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

@@ -0,0 +1,241 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  --background: white;
+  border-bottom: 0;
+
+  .heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+
+    .grey_text {
+      color: grey;
+      font-size: 14px;
+    }
+
+    .bold_text {
+      font-family: 'bold';
+    }
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .back_image {
+        height: 50px;
+        width: 50px;
+        border-radius: 100%;
+        margin-right: 10px;
+      }
+    }
+
+    .right {
+      ion-icon {
+        margin-right: 10px;
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+ion-content {
+
+  .search_box {
+    background-color: rgb(228, 227, 227);
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    border-radius: 10px;
+    margin-bottom: 20px;
+
+    ion-icon {
+      margin-right: 10px;
+    }
+  }
+
+  .grey_text {
+    color: grey;
+    font-size: 14px;
+  }
+
+  .bold_text {
+    font-family: 'bold';
+  }
+
+  .color_text {
+    color: var(--ion-color-primary);
+    font-size: 14px;
+  }
+
+  .heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .back_image {
+        height: 50px;
+        width: 50px;
+        border-radius: 100%;
+        margin-right: 10px;
+      }
+    }
+
+    .right {
+      ion-icon {
+        margin-right: 10px;
+        font-size: 20px;
+      }
+    }
+  }
+
+  .offer {
+    margin-top: 10px;
+
+    .back_image {
+      height: 150px;
+      width: 100%;
+    }
+  }
+
+  .flex {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+
+
+  .story-item {
+    overflow: scroll;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 20px;
+
+    .menu {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+
+      .item {
+        padding: 5px;
+        margin: 5px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+
+        ion-thumbnail {
+          border-radius: 15px;
+          width: max-content;
+          height: 60px;
+          width: 60px;
+          --border-radius: 50%;
+        }
+
+        ion-label {
+          font-size: 14px;
+          font-family: "medium";
+          color: var(--ion-color-medium);
+        }
+      }
+
+      .text {
+
+        display: flex;
+        align-items: center;
+        text-align: center;
+
+
+        ion-label {
+          margin-right: 10px;
+          border: 1px solid var(--ion-color-primary);
+          padding: 2px 12px;
+          border-radius: 20px;
+          color: var(--ion-color-primary);
+        }
+
+        .select {
+          background-color: var(--ion-color-primary);
+          color: white;
+        }
+      }
+    }
+  }
+
+
+  .bg_white {
+    display: flex;
+    align-items: flex-start;
+    background-color: white;
+    padding: 15px;
+    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    margin-bottom: 20px;
+
+    .list {
+      display: flex;
+      align-items: center;
+
+      .back_image {
+        height: 95px;
+        width: 95px;
+        border-radius: 10px;
+      }
+
+      .detail {
+        margin-left: 10px;
+
+        .bg_text {
+          color: var(--ion-color-primary);
+          background-color: #dfe1f3;
+          font-size: 12px;
+          padding: 2px 5px;
+          border-radius: 5px;
+          width: 80px;
+          text-align: center;
+        }
+
+        .name {
+          font-family: 'bold';
+          margin-top: 5px;
+        }
+
+        .price {
+          margin-top: 3px;
+          color: var(--ion-color-primary);
+          font-family: 'semi-bold';
+        }
+
+        .row {
+          display: flex;
+          align-items: center;
+          margin-top: 3px;
+
+          ion-icon {
+            font-size: 18px;
+          }
+
+          .small {
+            margin-left: 8px;
+            color: grey;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}

src/app/pages/home/home.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { HomePage } from './home.page';
+
+describe('HomePage', () => {
+  let component: HomePage;
+  let fixture: ComponentFixture<HomePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [HomePage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HomePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/home/home.page.ts

@@ -0,0 +1,50 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.page.html',
+  styleUrls: ['./home.page.scss'],
+})
+export class HomePage implements OnInit {
+
+  constructor(
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onDetails() {
+    this.router.navigate(['detail']);
+  }
+
+  onNotification() {
+    this.router.navigate(['notification']);
+  }
+
+  onTopMentors() {
+    this.router.navigate(['top-mentors']);
+  }
+
+  onBookmark() {
+    this.router.navigate(['bookmark']);
+  }
+
+  onPopular() {
+    this.router.navigate(['popular']);
+  }
+
+  onSearch() {
+    this.router.navigate(['search']);
+  }
+
+}

src/app/pages/inbox/inbox-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { InboxPage } from './inbox.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: InboxPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class InboxPageRoutingModule { }

src/app/pages/inbox/inbox.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { InboxPageRoutingModule } from './inbox-routing.module';
+
+import { InboxPage } from './inbox.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    InboxPageRoutingModule
+  ],
+  declarations: [InboxPage]
+})
+export class InboxPageModule { }

src/app/pages/inbox/inbox.page.html

@@ -0,0 +1,67 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon name="search-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Inbox</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-segment [(ngModel)]="tabs">
+    <ion-segment-button value="chat">
+      <ion-label>Chats</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="call">
+      <ion-label>Calls</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <div *ngIf="tabs =='chat'">
+
+    <div class="chat" *ngFor="let item of [1,2,3,4,5,6,7,8,9]" (click)="onMessage()">
+      <div class="flex">
+        <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>
+        <div style="margin-left: 10px;">
+          <ion-label class="bold_text"> Mike Jenifer </ion-label>
+          <div style="display: flex;">
+            <ion-label class="grey_text"> typing..... </ion-label>
+          </div>
+        </div>
+      </div>
+      <div class="column">
+        <ion-label class="small_text"> 11:30 PM</ion-label>
+        <ion-label class="color_text"> 10</ion-label>
+      </div>
+    </div>
+  </div>
+
+  <div *ngIf="tabs =='call'">
+    <div class="chat" *ngFor="let item of [1,2,3,4,5,6,7,8,9]">
+      <div class="flex">
+        <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p3.jpg)'"></div>
+        <div style="margin-left: 10px;">
+          <ion-label class="bold_text"> Mike Jenifer </ion-label>
+          <div style="display: flex; align-items: center;">
+            <ion-icon name="arrow-down-outline" color="success"></ion-icon>
+            <ion-label class="grey_text"> Incoming | Aug 29, 2022 </ion-label>
+          </div>
+        </div>
+      </div>
+      <div class="column">
+        <ion-icon name="call-outline" color="primary" class="call" (click)="onCall()"></ion-icon>
+      </div>
+    </div>
+  </div>
+
+</ion-content>

src/app/pages/inbox/inbox.page.scss

@@ -0,0 +1,67 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  ion-toolbar {
+    --background: var(--ion-color-primary);
+
+    ion-icon {
+      color: white;
+    }
+
+    ion-title {
+      color: white;
+    }
+  }
+}
+
+ion-content {
+
+  .grey_text {
+    color: grey;
+    font-size: 13px;
+  }
+
+  .small_text {
+    font-size: 12px;
+  }
+
+  .color_text {
+    color: white;
+    background-color: var(--ion-color-primary);
+    width: 25px;
+    padding: 2px;
+    text-align: center;
+    border-radius: 10px;
+    font-size: 12px;
+  }
+
+  .chat {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1rem;
+    border-bottom: 1px solid lightgray;
+    padding-bottom: 10px;
+
+    .flex {
+      display: flex;
+      align-items: center;
+
+      .back_image {
+        height: 50px;
+        width: 50px;
+        border-radius: 100%;
+      }
+    }
+  }
+
+  .call {
+    font-size: 20px;
+  }
+}

src/app/pages/inbox/inbox.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { InboxPage } from './inbox.page';
+
+describe('InboxPage', () => {
+  let component: InboxPage;
+  let fixture: ComponentFixture<InboxPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [InboxPage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InboxPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/inbox/inbox.page.ts

@@ -0,0 +1,36 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-inbox',
+  templateUrl: './inbox.page.html',
+  styleUrls: ['./inbox.page.scss'],
+})
+export class InboxPage implements OnInit {
+
+  tabs: any = 'chat';
+
+  constructor(
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onCall() {
+    this.router.navigate(['call']);
+  }
+
+  onMessage() {
+    this.router.navigate(['message']);
+  }
+
+}

src/app/pages/invite/invite-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { InvitePage } from './invite.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: InvitePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class InvitePageRoutingModule { }

src/app/pages/invite/invite.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { InvitePageRoutingModule } from './invite-routing.module';
+
+import { InvitePage } from './invite.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    InvitePageRoutingModule
+  ],
+  declarations: [InvitePage]
+})
+export class InvitePageModule { }

src/app/pages/invite/invite.page.html

@@ -0,0 +1,35 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start" (click)="onBack()">
+      <ion-button>
+        <ion-icon name="arrow-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Invite Friends</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <div class="chat" *ngFor="let item of [1,2,3,4,5,6,7,8,9]">
+    <div class="flex">
+      <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p3.jpg)'"></div>
+      <div style="margin-left: 10px;">
+        <ion-label class="bold_text"> Tynish Obey </ion-label>
+        <div style="display: flex;">
+          <ion-label class="grey_text"> +91 9876543210 </ion-label>
+        </div>
+      </div>
+    </div>
+    <div class="column">
+      <ion-label class="invite"> Invite</ion-label>
+    </div>
+  </div>
+</ion-content>

src/app/pages/invite/invite.page.scss

@@ -0,0 +1,63 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  ion-toolbar {
+    --background: var(--ion-color-primary);
+
+    ion-icon {
+      color: white;
+    }
+
+    ion-title {
+      color: white;
+    }
+  }
+}
+
+.grey_text {
+  color: grey;
+  font-size: 13px;
+}
+
+.small_text {
+  font-size: 12px;
+}
+
+.bold_text {
+  font-size: 16px;
+  font-family: 'semi-bold';
+}
+
+.chat {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1rem;
+  border-bottom: 1px solid lightgray;
+  padding-bottom: 10px;
+
+  .flex {
+    display: flex;
+    align-items: center;
+
+    .back_image {
+      height: 50px;
+      width: 50px;
+      border-radius: 100%;
+    }
+  }
+
+  .invite {
+    background-color: var(--ion-color-primary);
+    padding: 2px 10px;
+    color: white;
+    border-radius: 10px;
+    font-size: 13px;
+  }
+}

src/app/pages/invite/invite.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { InvitePage } from './invite.page';
+
+describe('InvitePage', () => {
+  let component: InvitePage;
+  let fixture: ComponentFixture<InvitePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [InvitePage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InvitePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/invite/invite.page.ts

@@ -0,0 +1,30 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NavController } from '@ionic/angular';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-invite',
+  templateUrl: './invite.page.html',
+  styleUrls: ['./invite.page.scss'],
+})
+export class InvitePage implements OnInit {
+
+  constructor(
+    private navctr: NavController
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onBack() {
+    this.navctr.back();
+  }
+
+}

src/app/pages/language/language-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LanguagePage } from './language.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LanguagePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LanguagePageRoutingModule { }

src/app/pages/language/language.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { LanguagePageRoutingModule } from './language-routing.module';
+
+import { LanguagePage } from './language.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    LanguagePageRoutingModule
+  ],
+  declarations: [LanguagePage]
+})
+export class LanguagePageModule { }

src/app/pages/language/language.page.html

@@ -0,0 +1,55 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start" (click)="onBack()">
+      <ion-button>
+        <ion-icon name="arrow-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Language</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-radio-group allow-empty-selection>
+    <ion-list-header>
+      <ion-label>Choose Language</ion-label>
+    </ion-list-header>
+    <ion-item>
+      <ion-label>English</ion-label>
+      <ion-radio slot="end" color="primary" checked></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Hindi</ion-label>
+      <ion-radio slot="end" color="secondary"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Spanish</ion-label>
+      <ion-radio slot="end" color="tertiary" name="sausage"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Arabic</ion-label>
+      <ion-radio slot="end" color="success" value="tomato"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>chiness</ion-label>
+      <ion-radio slot="end" color="warning" value="carrot"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Japaness</ion-label>
+      <ion-radio slot="end" color="danger" checked></ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-content>

src/app/pages/language/language.page.scss

@@ -0,0 +1,21 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  ion-toolbar {
+    --background: var(--ion-color-primary);
+
+    ion-icon {
+      color: white;
+    }
+
+    ion-title {
+      color: white;
+    }
+  }
+}

src/app/pages/language/language.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { LanguagePage } from './language.page';
+
+describe('LanguagePage', () => {
+  let component: LanguagePage;
+  let fixture: ComponentFixture<LanguagePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [LanguagePage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LanguagePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/language/language.page.ts

@@ -0,0 +1,30 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NavController } from '@ionic/angular';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-language',
+  templateUrl: './language.page.html',
+  styleUrls: ['./language.page.scss'],
+})
+export class LanguagePage implements OnInit {
+
+  constructor(
+    private navctr: NavController
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onBack() {
+    this.navctr.back();
+  }
+
+}

src/app/pages/login/login-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LoginPage } from './login.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LoginPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LoginPageRoutingModule { }

src/app/pages/login/login.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { LoginPageRoutingModule } from './login-routing.module';
+
+import { LoginPage } from './login.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    LoginPageRoutingModule
+  ],
+  declarations: [LoginPage]
+})
+export class LoginPageModule { }

src/app/pages/login/login.page.html

@@ -0,0 +1,62 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-content class="ion-padding">
+  <div class="ion-padding space">
+    <div>
+
+      <ion-label class="simp_lbl">Login to continue</ion-label>
+
+      <ion-item lines="none">
+        <ion-icon slot="start" name="mail-outline"></ion-icon>
+        <ion-input type="email" placeholder="Email"></ion-input>
+      </ion-item>
+
+      <ion-item lines="none">
+        <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
+        <ion-input type="password" placeholder="Password"></ion-input>
+      </ion-item>
+
+      <div class="check">
+        <ion-checkbox mode="md" checked></ion-checkbox>
+        <ion-label>Remember me</ion-label>
+      </div>
+
+      <ion-button expand="block" (click)="startLogin()">
+        Login
+      </ion-button>
+
+      <ion-label class="forgot_lbl" (click)="onForgot()">Forgot your password ?</ion-label>
+
+      <ion-label class="or">Or Continue With</ion-label>
+
+      <div class="button">
+        <ion-buttons>
+          <ion-button>
+            <ion-icon name="logo-facebook"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-buttons>
+          <ion-button>
+            <ion-icon name="logo-google"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-buttons>
+          <ion-button>
+            <ion-icon name="logo-twitter"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </div>
+    </div>
+    <div class="bottom">
+      <ion-label class="last_lbl">Don't have an account? <span (click)="onRegister()">Register</span></ion-label>
+    </div>
+  </div>
+</ion-content>

src/app/pages/login/login.page.scss

@@ -0,0 +1,98 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-content {
+  .simp_lbl {
+    margin-top: 20px;
+    font-size: 30px;
+    letter-spacing: 1.2;
+    margin-bottom: 30px;
+    font-family: 'semi-bold';
+  }
+
+  ion-item {
+    --background: #f7f7f7;
+    border-radius: 10px;
+    margin-bottom: 24px;
+
+    ion-input {
+      --padding-start: 10px;
+      font-family: "regular";
+      height: 50px;
+    }
+
+    ion-icon {
+      font-size: 22px;
+    }
+  }
+
+  .check {
+    margin-top: 2rem;
+    display: flex;
+    align-items: center;
+
+    ion-label {
+      font-size: 14px;
+      margin-left: 10px;
+      color: var(--ion-color-primary);
+    }
+  }
+
+  ion-button {
+    --border-radius: 10px;
+    margin-top: 1.5rem;
+    height: 50px;
+  }
+
+  .forgot_lbl {
+    text-align: center;
+    margin-top: 10px;
+    font-size: 14px;
+    color: var(--ion-color-primary);
+  }
+
+  .or {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    color: grey;
+    font-size: 14px;
+  }
+
+  .button {
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    justify-content: center;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+
+    ion-buttons {
+      margin: 0 10px;
+
+      ion-button {
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+        border-radius: 10px;
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+
+  .last_lbl {
+    text-align: center;
+    margin-top: 16px;
+    font-size: 16px;
+    color: #c2c2cb;
+
+    span {
+      color: var(--ion-color-primary);
+      font-family: "bold";
+    }
+  }
+}

src/app/pages/login/login.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { LoginPage } from './login.page';
+
+describe('LoginPage', () => {
+  let component: LoginPage;
+  let fixture: ComponentFixture<LoginPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [LoginPage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LoginPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/login/login.page.ts

@@ -0,0 +1,43 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.page.html',
+  styleUrls: ['./login.page.scss'],
+})
+export class LoginPage implements OnInit {
+
+
+  constructor(
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+  }
+
+  startLogin() {
+    //this.router.navigate(['tabs/tab1']);
+  }
+
+  onForgot() {
+    this.router.navigate(['forgot']);
+  }
+
+  onRegister() {
+    this.router.navigate(['register']);
+  }
+
+  onClick() {
+    this.router.navigate(['slider']);
+  }
+
+}

src/app/pages/mentor/mentor-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MentorPage } from './mentor.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MentorPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MentorPageRoutingModule { }

src/app/pages/mentor/mentor.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MentorPageRoutingModule } from './mentor-routing.module';
+
+import { MentorPage } from './mentor.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    MentorPageRoutingModule
+  ],
+  declarations: [MentorPage]
+})
+export class MentorPageModule { }

src/app/pages/mentor/mentor.page.html

@@ -0,0 +1,156 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start" (click)="onBack()">
+      <ion-button>
+        <ion-icon name="arrow-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <div class="profile">
+    <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/profile.jpg)'">
+    </div>
+    <div class="title">
+      <ion-label style="font-size: 17px; font-family: 'bold';">Jonathan Williams</ion-label>
+      <ion-label style="font-size: 13px;">Senior UI/UX Designer at Google</ion-label>
+    </div>
+  </div>
+
+  <div class="flex">
+    <div class="about">
+      <ion-label class="bold_text">25</ion-label>
+      <ion-label class="simple_text">Courses</ion-label>
+    </div>
+    <div class="about">
+      <ion-label class="bold_text">22250</ion-label>
+      <ion-label class="simple_text">Students</ion-label>
+    </div>
+    <div class="about">
+      <ion-label class="bold_text">9876</ion-label>
+      <ion-label class="simple_text">Reviews</ion-label>
+    </div>
+  </div>
+
+  <ion-row>
+    <ion-col size="6">
+      <div class="message">
+        <ion-icon name="chatbubble-ellipses-outline" class="chat_icon"></ion-icon>
+        <ion-label class="white_text">Message</ion-label>
+      </div>
+    </ion-col>
+    <ion-col size="6">
+      <div class="website">
+        <ion-icon name="link-outline" class="link_icon"></ion-icon>
+        <ion-label class="color_text">Website</ion-label>
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-segment [(ngModel)]="tabs">
+    <ion-segment-button value="course">
+      <ion-label>Courses</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="student">
+      <ion-label>Students</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="review">
+      <ion-label>Reviews</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <div *ngIf="tabs =='student'" class="student">
+    <div class="mentor" *ngFor="let item of [1,2,3,4,5,6,7,8,9]">
+      <div class="left">
+        <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p3.jpg)'"></div>
+        <div style="margin-left: 10px;">
+          <ion-label class="bold">Jonathon Williams</ion-label>
+          <ion-label class="grey">Student</ion-label>
+        </div>
+      </div>
+      <ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>
+    </div>
+  </div>
+
+  <div *ngIf="tabs =='review'" class="review_tab">
+    <div class="total">
+      <div class="star-rate">
+        <ion-icon name="star-half-outline" color="warning"></ion-icon>
+        <ion-label class="bold">4.8 (5456 Reviews)</ion-label>
+      </div>
+      <ion-label class="color">See all</ion-label>
+    </div>
+
+    <div class="story-item">
+      <div class="menu">
+        <div class="text">
+          <div class="select show">
+            <ion-icon slot="start" name="star" color="light" class="star_icon"></ion-icon>
+            <ion-label class="rate_num white">All</ion-label>
+          </div>
+          <div class="select">
+            <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>
+            <ion-label class="rate_num">1</ion-label>
+          </div>
+          <div class="select">
+            <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>
+            <ion-label class="rate_num">2</ion-label>
+          </div>
+          <div class="select">
+            <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>
+            <ion-label class="rate_num">3</ion-label>
+          </div>
+          <div class="select">
+            <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>
+            <ion-label class="rate_num">4</ion-label>
+          </div>
+          <div class="select">
+            <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>
+            <ion-label class="rate_num">5</ion-label>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="reviw_list" *ngFor="let item of [1,2,3,4,5]">
+      <div class="profile_display">
+        <div class="left">
+          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>
+          <div style="margin-left: 10px;">
+            <ion-label class="bold">Jonathon Williams</ion-label>
+          </div>
+        </div>
+        <div class="right">
+          <div class="select">
+            <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>
+            <ion-label class="rate_num">5</ion-label>
+          </div>
+          <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>
+        </div>
+      </div>
+      <ion-label>The course is very good. the experience of the menter is very clear and easy to understand
+      </ion-label>
+
+      <div class="like">
+        <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>
+        <ion-label class="count">330</ion-label>
+        <ion-label class="time">2 Days ago</ion-label>
+      </div>
+    </div>
+  </div>
+
+</ion-content>

src/app/pages/mentor/mentor.page.scss

@@ -0,0 +1,317 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  ion-toolbar {
+    --background: var(--ion-color-primary);
+
+    ion-icon {
+      color: white;
+    }
+
+    ion-title {
+      color: white;
+    }
+  }
+}
+
+ion-content {
+  .profile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 16px;
+    padding-bottom: 30px;
+
+    .back_image {
+      height: 90px;
+      width: 90px;
+      border-radius: 100%;
+      position: relative;
+    }
+
+    .title {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .flex {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 20px;
+
+    .about {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .bold_text {
+      font-family: 'semi-bold';
+      font-size: 20px;
+    }
+
+    .simple_text {
+      font-size: 13px;
+    }
+  }
+
+  ion-row {
+    margin-bottom: 20px;
+
+    .message {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--ion-color-primary);
+      padding: 10px 0;
+      border-radius: 30px;
+
+      .chat_icon {
+        margin-right: 10px;
+        color: white;
+      }
+
+      .white_text {
+        color: white;
+        font-family: 'medium';
+      }
+    }
+
+    .website {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 10px 0;
+      border-radius: 30px;
+      border: 1px solid var(--ion-color-primary);
+
+      .link_icon {
+        margin-right: 10px;
+        color: var(--ion-color-primary);
+      }
+
+      .color_text {
+        color: var(--ion-color-primary);
+      }
+
+    }
+  }
+
+  .student {
+    .mentor {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 20px;
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .men_image {
+          height: 50px;
+          width: 50px;
+          border-radius: 100%;
+        }
+
+        .bold {
+          font-family: 'semi-bold';
+        }
+
+        .grey {
+          color: grey;
+          font-size: 14px;
+        }
+      }
+
+      ion-icon {
+        font-size: 25px;
+      }
+    }
+  }
+
+  .review_tab {
+    margin-top: 20px;
+
+    .total {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .star-rate {
+        display: flex;
+        align-items: center;
+
+        .bold {
+          font-size: 17px;
+          font-family: 'semi-bold';
+          margin-left: 5px;
+        }
+      }
+
+      .color {
+        color: var(--ion-color-primary);
+        font-size: 14px;
+      }
+    }
+
+
+    .story-item {
+      overflow: scroll;
+      display: flex;
+      flex-direction: row;
+      margin-top: 20px;
+
+      .menu {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+
+        .item {
+          padding: 5px;
+          margin: 5px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+
+          ion-thumbnail {
+            border-radius: 15px;
+            width: max-content;
+            height: 60px;
+            width: 60px;
+            --border-radius: 50%;
+          }
+
+          ion-label {
+            font-size: 14px;
+            font-family: "medium";
+            color: var(--ion-color-medium);
+          }
+        }
+
+        .text {
+
+          display: flex;
+          align-items: center;
+          text-align: center;
+
+          .select {
+            display: flex;
+            align-items: center;
+            border: 1px solid var(--ion-color-primary);
+            border-radius: 20px;
+            padding: 2px 15px;
+            margin-right: 10px;
+
+            .rate_num {
+              margin-left: 5px;
+              color: var(--ion-color-primary);
+            }
+          }
+
+          .show {
+            background-color: var(--ion-color-primary);
+          }
+
+          .white {
+            color: white !important;
+          }
+
+          .choice {
+            display: flex;
+          }
+        }
+      }
+    }
+
+
+    .reviw_list {
+      margin-top: 25px;
+
+      .profile_display {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          .men_image {
+            height: 40px;
+            width: 40px;
+            border-radius: 100%;
+          }
+
+
+          .bold {
+            font-family: 'semi-bold';
+          }
+
+          .grey {
+            color: grey;
+            font-size: 14px;
+          }
+        }
+
+        .right {
+          display: flex;
+          align-items: center;
+
+          .select {
+            display: flex;
+            align-items: center;
+            border: 1px solid var(--ion-color-primary);
+            border-radius: 20px;
+            padding: 2px 15px;
+            margin-right: 10px;
+
+            .rate_num {
+              margin-left: 5px;
+              color: var(--ion-color-primary);
+            }
+          }
+
+          ion-icon {
+            font-size: 20px;
+          }
+        }
+      }
+
+      .like {
+        display: flex;
+        align-items: center;
+        margin-top: 10px;
+
+        .heart {
+          font-size: 25px;
+          margin-right: 5px;
+        }
+
+        .count {
+          margin-right: 10px;
+        }
+
+        .time {
+          color: grey;
+          font-size: 14px;
+        }
+      }
+    }
+
+  }
+
+
+
+
+}

src/app/pages/mentor/mentor.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { MentorPage } from './mentor.page';
+
+describe('MentorPage', () => {
+  let component: MentorPage;
+  let fixture: ComponentFixture<MentorPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [MentorPage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MentorPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/mentor/mentor.page.ts

@@ -0,0 +1,33 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NavController } from '@ionic/angular';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-mentor',
+  templateUrl: './mentor.page.html',
+  styleUrls: ['./mentor.page.scss'],
+})
+export class MentorPage implements OnInit {
+
+  tabs = 'course';
+
+
+  constructor(
+    private navctr: NavController
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onBack() {
+    this.navctr.back();
+  }
+
+}

src/app/pages/message/message-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MessagePage } from './message.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MessagePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MessagePageRoutingModule { }

src/app/pages/message/message.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MessagePageRoutingModule } from './message-routing.module';
+
+import { MessagePage } from './message.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    MessagePageRoutingModule
+  ],
+  declarations: [MessagePage]
+})
+export class MessagePageModule { }

src/app/pages/message/message.page.html

@@ -0,0 +1,57 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header>
+  <ion-toolbar>
+    <ion-item lines="none">
+      <ion-icon name="arrow-back-outline" (click)="onBack()"></ion-icon>
+      <ion-label>
+        Jenny Wilona
+      </ion-label>
+    </ion-item>
+    <ion-buttons slot="end" (click)="onCall()">
+      <ion-button>
+        <ion-icon name="call-outline" color="light"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon name="ellipsis-horizontal-circle-outline" color="light"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="messageList">
+    <div class="left">
+      <p>Attending a trad show can be</p>
+    </div>
+    <div class="right">
+      <p>hey</p>
+    </div>
+    <div class="left">
+      <p>hii, there</p>
+    </div>
+  </div>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-row>
+      <ion-col size="10">
+        <ion-input type="text" placeholder="message..."></ion-input>
+      </ion-col>
+      <ion-col size="2">
+        <div class="btn">
+          <ion-icon name="mic"></ion-icon>
+        </div>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>

src/app/pages/message/message.page.scss

@@ -0,0 +1,112 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  --background: var(--ion-color-primary);
+
+  ion-toolbar {
+    --background: var(--ion-color-primary);
+
+    ion-item {
+      --background: transparent;
+
+      ion-icon {
+        font-size: 20px;
+        color: #eaeaf4;
+      }
+
+      .back_image {
+        height: 40px;
+        width: 40px;
+        border-radius: 100%;
+      }
+
+      ion-label {
+        margin-left: 1rem;
+        color: #eaeaf4;
+
+        h2 {
+          font-size: 18px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+ion-content {
+
+  .messageList {
+    .left {
+      width: 100%;
+      float: left;
+      margin-left: 15px;
+
+      p {
+        width: max-content;
+        float: left;
+        background: rgb(237, 235, 235);
+        border-radius: 0 10px 10px 10px;
+        padding: 5px 10px;
+      }
+    }
+
+    .right {
+      width: 100%;
+      float: right;
+      margin-right: 15px;
+
+      p {
+        width: max-content;
+        float: right;
+        background: var(--ion-color-primary);
+        color: white;
+        border-radius: 10px 0px 10px 10px;
+        padding: 5px 10px;
+      }
+    }
+  }
+}
+
+ion-footer {
+  ion-toolbar {
+    --border-width: 0px;
+    padding: 10px;
+    align-items: center;
+
+    ion-row {
+      display: flex;
+      flex-direction: row;
+
+      ion-col {
+        ion-input {
+          --padding-start: 20px;
+          background: #F4F5F8;
+          border-radius: 30px;
+          border: 1px solid rgb(220, 219, 219);
+        }
+
+        ion-buttons {
+          background: #fe734d50;
+          border-radius: 50%;
+        }
+
+        .btn {
+          background: var(--ion-color-primary);
+          color: white;
+          border-radius: 50%;
+          height: 100%;
+          width: 90%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}

src/app/pages/message/message.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { MessagePage } from './message.page';
+
+describe('MessagePage', () => {
+  let component: MessagePage;
+  let fixture: ComponentFixture<MessagePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [MessagePage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MessagePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/message/message.page.ts

@@ -0,0 +1,36 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { Router } from '@angular/router';
+import { NavController } from '@ionic/angular';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-message',
+  templateUrl: './message.page.html',
+  styleUrls: ['./message.page.scss'],
+})
+export class MessagePage implements OnInit {
+
+  constructor(
+    private navctr: NavController,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onBack() {
+    this.navctr.back();
+  }
+
+  onCall() {
+    this.router.navigate(['call']);
+  }
+
+}

src/app/pages/my-course/my-course-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MyCoursePage } from './my-course.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MyCoursePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MyCoursePageRoutingModule { }

src/app/pages/my-course/my-course.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MyCoursePageRoutingModule } from './my-course-routing.module';
+
+import { MyCoursePage } from './my-course.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    MyCoursePageRoutingModule
+  ],
+  declarations: [MyCoursePage]
+})
+export class MyCoursePageModule { }

src/app/pages/my-course/my-course.page.html

@@ -0,0 +1,63 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon name="search-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>My Courses</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-segment [(ngModel)]="tabs">
+    <ion-segment-button value="on">
+      <ion-label>Ongoing</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="done">
+      <ion-label>Complete</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <div *ngIf="tabs =='on'">
+
+    <div class="content" *ngFor="let item of [1,2,3,4,5,6,7]" (click)="onCourseDetail()">
+      <div class="flex">
+        <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p4.jpg)'"></div>
+        <div class="text">
+          <ion-label class="bold_text">3D Design Illustartion</ion-label>
+          <ion-label class="grey_text">2hrs 23min</ion-label>
+          <div class="progress">
+            <ion-progress-bar value="0.5"></ion-progress-bar>
+            <ion-label class="stage">87/175</ion-label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div *ngIf="tabs =='done'">
+    <div class="content" *ngFor="let item of [1,2,3,4,5,6,7]" (click)="onCourseDetail()">
+      <div class="flex">
+        <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p4.jpg)'"></div>
+        <div class="text">
+          <ion-label class="bold_text">Flutter Mobile App</ion-label>
+          <ion-label class="grey_text">2hrs 23min</ion-label>
+          <div class="progress">
+            <ion-progress-bar value="1.0"></ion-progress-bar>
+            <ion-label class="stage">175/175</ion-label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</ion-content>