18-06-2019|12:43

src/app/home/getapp/getapp.component.html

+<div class="getApp_wrapper">
+    <section class="module parallax parallax_title">
+      <div class="overlay">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-8">
+              <div class="download_inner">
+                  <h1><strong>The Carfixxers</strong><br>
+                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+                  </h1>
+                  <p>
+                      It is a long established fact that a reader will be distracted by the readable content of 
+                      a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less
+                       normal distribution of letters, as opposed to using 'Content here, content here', making it look
+                        like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
+                         their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
+                  </p>
+                  <div class="store">
+                    <img src="../../../assets/images/asset_playstore.png">
+                    <img src="../../../assets/images/asset_applestore.png">
+                  </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="phone_img">
+                <img src="../../../assets/images/asset_phone_img.png">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+</div>

src/app/home/getapp/getapp.component.scss

+.getApp_wrapper{
+    .parallax_title {
+        background: url("/assets/images/asset_landing_background.png");
+        position: relative;
+        .overlay{
+            top:0px;
+            left:0px;
+            right:0px;
+            bottom:0px;
+            padding-top:85px;
+            background-color: rgba(0,0,0,0.7);
+            .download_inner{
+                padding-top:20%;
+                padding-bottom: 20%;
+                h1{
+                    color: #fff;
+                    font-weight: 300;
+                    padding-bottom: 20px;
+                    font-size: 25px;
+                    strong{
+                        font-size: 40px;
+                        font-weight: 300;
+                    }
+                }
+
+                p{
+                    color: #fff;
+                    font-weight: 400;
+                    font-size: 16px;
+                }
+                .store{
+                    padding-top: 20px;
+                    img{
+                        margin-right: 20px;
+                    }
+                }
+            }
+            .phone_img{
+                padding-top:30px;
+                img{
+                    width: 117%;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/home/getapp/getapp.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GetappComponent } from './getapp.component';
+
+describe('GetappComponent', () => {
+  let component: GetappComponent;
+  let fixture: ComponentFixture<GetappComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GetappComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GetappComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/getapp/getapp.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-getapp',
+  templateUrl: './getapp.component.html',
+  styleUrls: ['./getapp.component.scss']
+})
+export class GetappComponent implements OnInit {
+
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+}

src/app/home/home.module.ts

@@ -16,6 +16,7 @@ import { TncComponent } from './tnc/tnc.component';
 import { PrivacyComponent } from './privacy/privacy.component';
 import { TnsComponent } from './tns/tns.component';
 import { TooltipModule } from 'ng2-tooltip-directive';
+import { GetappComponent } from './getapp/getapp.component';
 
 
 @NgModule({
@@ -25,7 +26,8 @@ import { TooltipModule } from 'ng2-tooltip-directive';
      ForgotComponent,
      TncComponent,
      PrivacyComponent,
-     TnsComponent
+     TnsComponent,
+     GetappComponent
     ],
   imports: [
     FormsModule,

src/app/home/home.routing.ts

@@ -5,13 +5,15 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { TncComponent } from './tnc/tnc.component';
 import { PrivacyComponent } from './privacy/privacy.component';
 import { TnsComponent } from './tns/tns.component';
+import {GetappComponent} from './getapp/getapp.component';
 
 const ModuleRoutes: Routes = [
     { path: 'index', component: IndexComponent },
     { path: 'privacy', component: PrivacyComponent },
     { path: 'dashboard', component: DashboardComponent },
     { path: 'termsservice', component: TnsComponent },
-    { path: 'termscondition', component: TncComponent }
+    { path: 'termscondition', component: TncComponent },
+    { path: 'getapp', component: GetappComponent}
 ];
 
 export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)

src/app/navbar/navbar.component.html

@@ -50,6 +50,11 @@
                             AUTO SERVICE PROVIDER
                     </a>
                 </li>
+                <li class="nav-item">
+                        <a class="nav-link" (click)="goToPage('getapp')">
+                            GET THE APP
+                        </a>
+                </li>
                 <li class="nav-item" *ngIf="!loginDetails">
                     <button (click)="resetForm()" class="sign_btn" data-toggle="modal" data-target="#login">
                         <img src="assets/images/asset_signin.png">SIGN IN
@@ -60,7 +65,7 @@
                         <img src="assets/images/asset_signup.png">SIGN UP
                     </button>
                 </li>
-
+                
                 <li class="nav-item" *ngIf="loginDetails">
                     <a class="nav-link dropdown">
                         <div class="account_div dropdown-toggle" data-toggle="dropdown">

src/assets/css/responsive.scss

@@ -37,6 +37,12 @@
 
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
 
+    .phone_img{
+        img{
+            width:100% !important;
+        }
+    }
+
     .purchase_filter_section{
         width: 100% !important;
     }