diff --git a/package-lock.json b/package-lock.json
index c10ea0d..6bb643c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1063,6 +1063,7 @@
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
"integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
"dev": true,
+ "optional": true,
"requires": {
"delegates": "^1.0.0",
"readable-stream": "^2.0.6"
@@ -2279,7 +2280,8 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"constants-browserify": {
"version": "1.0.0",
@@ -2678,7 +2680,8 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"depd": {
"version": "1.1.2",
@@ -3628,7 +3631,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"aproba": {
"version": "1.2.0",
@@ -3649,12 +3653,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -3669,17 +3675,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -3796,7 +3805,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
@@ -3808,6 +3818,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -3822,6 +3833,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -3829,12 +3841,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -3853,6 +3867,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3933,7 +3948,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -3945,6 +3961,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"wrappy": "1"
}
@@ -4030,7 +4047,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -4066,6 +4084,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -4085,6 +4104,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -4128,12 +4148,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
}
}
},
@@ -4142,6 +4164,7 @@
"resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
"integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
"dev": true,
+ "optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"inherits": "~2.0.0",
@@ -4154,6 +4177,7 @@
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
"dev": true,
+ "optional": true,
"requires": {
"aproba": "^1.0.3",
"console-control-strings": "^1.0.0",
@@ -4191,7 +4215,8 @@
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
"integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"get-stream": {
"version": "3.0.0",
@@ -4371,7 +4396,8 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"has-value": {
"version": "1.0.0",
@@ -5110,7 +5136,8 @@
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
"integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"is-windows": {
"version": "1.0.2",
@@ -5743,6 +5770,7 @@
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
"integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
"dev": true,
+ "optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"parse-json": "^2.2.0",
@@ -5755,7 +5783,8 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
- "dev": true
+ "dev": true,
+ "optional": true
}
}
},
@@ -6028,7 +6057,8 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
"integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"map-visit": {
"version": "1.0.0",
@@ -6671,6 +6701,7 @@
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
"dev": true,
+ "optional": true,
"requires": {
"are-we-there-yet": "~1.1.2",
"console-control-strings": "~1.1.0",
@@ -7706,6 +7737,7 @@
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
"integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
"dev": true,
+ "optional": true,
"requires": {
"load-json-file": "^1.0.0",
"normalize-package-data": "^2.3.2",
@@ -7717,6 +7749,7 @@
"resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
"integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
"dev": true,
+ "optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"pify": "^2.0.0",
@@ -7727,7 +7760,8 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
- "dev": true
+ "dev": true,
+ "optional": true
}
}
},
@@ -7736,6 +7770,7 @@
"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
"integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
"dev": true,
+ "optional": true,
"requires": {
"find-up": "^1.0.0",
"read-pkg": "^1.0.0"
@@ -7746,6 +7781,7 @@
"resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
"integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
"dev": true,
+ "optional": true,
"requires": {
"path-exists": "^2.0.0",
"pinkie-promise": "^2.0.0"
@@ -7756,6 +7792,7 @@
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
"integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
"dev": true,
+ "optional": true,
"requires": {
"pinkie-promise": "^2.0.0"
}
@@ -9084,6 +9121,7 @@
"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
"integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
"dev": true,
+ "optional": true,
"requires": {
"is-utf8": "^0.2.0"
}
@@ -10423,6 +10461,7 @@
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
"integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
"dev": true,
+ "optional": true,
"requires": {
"string-width": "^1.0.2 || 2"
}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1e15754..2d46021 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,3 @@
<app-header></app-header>
<router-outlet></router-outlet>
+<app-footer></app-footer>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cc3e06e..91159f9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,12 +5,14 @@ import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
+import {FooterComponent} from './footer/footer.component';
import { from } from 'rxjs';
@NgModule({
declarations: [
AppComponent,
- HeaderComponent
+ HeaderComponent,
+ FooterComponent
],
imports: [
BrowserModule,
diff --git a/src/app/body/body-routing.module.ts b/src/app/body/body-routing.module.ts
index 16837a4..a96d87a 100644
--- a/src/app/body/body-routing.module.ts
+++ b/src/app/body/body-routing.module.ts
@@ -2,6 +2,9 @@ import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LandingpageComponent } from './landingpage/landingpage.component';
import { AboutusComponent } from './aboutus/aboutus.component';
+import {ContactComponent} from './contact/contact.component';
+import {ProductsComponent} from './products/products.component';
+import { from } from 'rxjs';
const ModuleRoutes: Routes = [
{
path:'landing',component: LandingpageComponent
@@ -9,6 +12,12 @@ const ModuleRoutes: Routes = [
},
{
path:'about',component: AboutusComponent
+ },
+ {
+ path:'products',component:ProductsComponent
+ },
+ {
+ path:'contact',component:ContactComponent
}
];
export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)
\ No newline at end of file
diff --git a/src/app/body/body.module.ts b/src/app/body/body.module.ts
index 0e7ffbb..d7b1a87 100644
--- a/src/app/body/body.module.ts
+++ b/src/app/body/body.module.ts
@@ -4,10 +4,15 @@ import { LandingpageComponent } from './landingpage/landingpage.component';
import{ moduleRouting } from './body-routing.module';
import { from } from 'rxjs';
import { AboutusComponent } from './aboutus/aboutus.component';
+
+import { ContactComponent} from './contact/contact.component';
+import {ProductsComponent} from './products/products.component';
+
import { SlickCarouselModule } from 'ngx-slick-carousel';
+
@NgModule({
- declarations: [LandingpageComponent, AboutusComponent],
+ declarations: [LandingpageComponent, AboutusComponent,ProductsComponent,ContactComponent],
imports: [
CommonModule,
moduleRouting,
diff --git a/src/app/body/contact/contact.component.html b/src/app/body/contact/contact.component.html
new file mode 100644
index 0000000..b2264c2
--- /dev/null
+++ b/src/app/body/contact/contact.component.html
@@ -0,0 +1,28 @@
+<div class="cnt">
+ <div class="container">
+ <div class="head-cnt">
+ <h3>CONTACT<b> US</b></h3>
+ <hr>
+ <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+</div>
+<div class="cnt-det">
+ <input type="text" class="txt-left" placeholder=" First Name">
+ <input type="text" class="txt-right" placeholder=" Second Name"><br>
+ <input type="email" class="txt-left" placeholder=" Email ID">
+ <input type="text" class="txt-right" placeholder=" Phone Number">
+
+ <select class="form-control" id="sel1">
+ <option >I am interested</option>
+ <option></option>
+ <option></option>
+ <option></option>
+ </select>
+ <textarea class="mess-txt" placeholder=" Type Your Message"></textarea>
+
+</div>
+<div class="btn"><button class="send-mail">SEND</button></div>
+
+
+ </div>
+</div>
+
diff --git a/src/app/body/contact/contact.component.scss b/src/app/body/contact/contact.component.scss
new file mode 100644
index 0000000..6423532
--- /dev/null
+++ b/src/app/body/contact/contact.component.scss
@@ -0,0 +1,118 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
+
+*{
+ font-family: 'Roboto', sans-serif;
+}
+
+
+.cnt{
+
+ text-align: center;
+ height: auto;
+ width:auto;
+ margin-bottom: 50px;
+ padding-top: 100px;
+ .head-cnt h3{
+ color: #171717;
+ font-size: 48px;
+ font-weight: 800;
+ text-align: center;
+ }
+ .head-cnt b{
+ color: #67af05;
+ font-weight: 800;
+ }
+ .head-cnt p{
+ font-size: 20px;
+ color:#464646;
+ text-align: center;
+ font-weight: 500;
+ }
+ .head-cnt hr{
+ width: 56px;
+ // height: 15px;
+
+ border-top: 9px solid rgb(140,195,60);
+ }
+
+.cnt-det {
+ text-align: center;
+ outline: none;
+
+ input{
+ width:300px;
+ height: 45px;
+ line-break: 1;
+ text-align: left;
+
+ margin-bottom: 15px;
+ font-size: 18px;
+ background: rgb(238, 238, 238);
+ border: 1px solid rgb(238, 238, 238);
+ color: #3d3e3d;
+ outline:none;
+ padding-left: 15px;
+ }
+ input::placeholder{
+ color: rgba(61, 62, 61, 0.28);
+ }
+
+ .txt-left{
+ margin-right: 10px;
+ }
+ .txt-right{
+ margin-left: 10px;
+ }
+ select{
+ outline: none;
+ option{
+ color: rgba(61, 62, 61, 0.28);
+ }
+
+ }
+
+ .form-control{
+ width: 621px;
+ background: rgb(238, 238, 238);
+ border: 1px solid rgb(238, 238, 238);
+ color: #757575;
+ margin: 0 auto;
+ text-align: left;
+ font-size: 18px;
+ height: 45px;
+ margin-bottom: 15px;
+ outline:none;
+ padding-left: 15px;
+
+
+
+}
+textarea::placeholder{
+ color: rgba(61, 62, 61, 0.28);
+}
+
+ textarea{
+ width:621px;
+ height: 150px;
+ color:#3d3e3d;
+ font-size: 18px;
+ background: rgb(238, 238, 238);
+ border: 1px solid rgb(238, 238, 238);
+ text-align: left;
+ outline:none;
+ resize: none;
+ padding-left: 15px;
+ }
+
+}
+.send-mail{
+ background: rgb(93,151,16);
+ border:1px solid;
+ width: 130px;
+ height: 40px;
+ font-size: 18px;
+ color:#ffffff;
+ outline: none;
+
+}
+}
\ No newline at end of file
diff --git a/src/app/body/contact/contact.component.spec.ts b/src/app/body/contact/contact.component.spec.ts
new file mode 100644
index 0000000..427633e
--- /dev/null
+++ b/src/app/body/contact/contact.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+ let component: ContactComponent;
+ let fixture: ComponentFixture<ContactComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ContactComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ContactComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/body/contact/contact.component.ts b/src/app/body/contact/contact.component.ts
new file mode 100644
index 0000000..1a5146b
--- /dev/null
+++ b/src/app/body/contact/contact.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-contact',
+ templateUrl: './contact.component.html',
+ styleUrls: ['./contact.component.scss']
+})
+export class ContactComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/body/products/products.component.html b/src/app/body/products/products.component.html
new file mode 100644
index 0000000..b3becb5
--- /dev/null
+++ b/src/app/body/products/products.component.html
@@ -0,0 +1,245 @@
+<div class="pro-main">
+
+ <div class="banner-color">
+ <div class="container">
+ <div class="ban-sun">
+ <div class="sun-det">
+ <h3>The Sun has <b>Risen</b></h3>
+ <hr>
+ <p>Opt For Technically Advanced And High-End Products</p>
+ <div class="decl">
+ <p>Obtaining effectual, technological solutions from Techware Solution will make your life
+ easier. We provide a flexible and wide range of products and services helping your
+ business objectives and expectation into its peak..</p>
+ </div>
+ </div>
+
+ </div>
+
+
+ </div>
+ </div>
+ <!---------------------------pro Tab---------------------------------->
+ <div class="products-det">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-12 ">
+ <nav>
+ <div class="nav nav-tabs " id="nav-tab" role="tablist">
+
+
+ <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-alla" aria-selected="true">All</a>
+
+ <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-web" aria-selected="false">Web</a>
+
+ <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-app" aria-selected="false">App</a>
+
+
+
+ </div>
+ </nav>
+ <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
+ <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
+ <div class="alval">
+ <div class="row">
+ <div class="col-md-6 ">
+ <div class="img-cls">
+ <img src="../../../assets/img/asset_poster_one.png">
+ </div>
+ </div>
+ <div class="col-md-6 ">
+ <div class="txt-cls">
+ <img class="logo-im" src="../../../assets/img/cabok-log.png">
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+ 1500s, when an unknown printer took a galley of type </p>
+ <div class="btn-mor"><button class="btn-cab">VIEW MORE</button></div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 ">
+ <div class="txt-cls-l">
+ <img src="../../../assets/img/bokdoc-logo.png">
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+ 1500s, when an unknown printer took a galley of type </p>
+ <div class="btn-mor"><button class="btn-doc">VIEW MORE</button></div>
+ </div>
+ </div>
+ <div class="col-md-6 ">
+ <div class="img-cls-l">
+ <img src="../../../assets/img/asset_poster_two.png">
+ </div>
+ </div>
+ </div>
+ <div class="row">
+
+ <div class="col-md-6 ">
+ <div class="img-cls">
+ <img src="../../../assets/img/asset_poster_four.png">
+ </div>
+ </div>
+ <div class="col-md-6 ">
+ <div class="txt-cls">
+ <img src="../../../assets/img/mom-logo.png">
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+ 1500s, when an unknown printer took a galley of type </p>
+ <div class="btn-mor"><button class="btn-mom">VIEW MORE</button></div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 ">
+ <div class="txt-cls-l">
+ <img src="../../../assets/img/finepay-logo.png">
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+ 1500s, when an unknown printer took a galley of type </p>
+ <div class="btn-mor"><button class="btn-fpay">VIEW MORE</button></div>
+ </div>
+ </div>
+ <div class="col-md-6 im-txt">
+ <div class="img-cls-l">
+ <img src="../../../assets/img/finepay.png">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
+ <div class="alval">
+ <div class="row">
+ <div class="col-md-6 ">
+ <div class="img-cls">
+ <img src="../../../assets/img/asset_poster_one.png">
+ </div>
+ </div>
+ <div class="col-md-6 ">
+ <div class="txt-cls">
+ <img class="logo-im" src="../../../assets/img/cabok-log.png">
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+ 1500s, when an unknown printer took a galley of type </p>
+ <div class="btn-mor"><button class="btn-cab">VIEW MORE</button></div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 ">
+ <div class="txt-cls-l">
+ <img src="../../../assets/img/bokdoc-logo.png">
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+ 1500s, when an unknown printer took a galley of type </p>
+ <div class="btn-mor"><button class="btn-doc">VIEW MORE</button></div>
+ </div>
+ </div>
+ <div class="col-md-6 ">
+ <div class="img-cls-l">
+ <img src="../../../assets/img/asset_poster_two.png">
+ </div>
+ </div>
+ </div>
+ <div class="row">
+
+ <div class="col-md-6 ">
+ <div class="img-cls">
+ <img src="../../../assets/img/asset_poster_four.png">
+ </div>
+ </div>
+ <div class="col-md-6 ">
+ <div class="txt-cls">
+ <img src="../../../assets/imsg/mom-logo.png">
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+ 1500s, when an unknown printer took a galley of type </p>
+ <div class="btn-mor"><button class="btn-mom">VIEW MORE</button></div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 ">
+ <div class="txt-cls-l">
+ <img src="../../../assets/img/finepay-logo.png">
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+ 1500s, when an unknown printer took a galley of type </p>
+ <div class="btn-mor"><button class="btn-fpay">VIEW MORE</button></div>
+ </div>
+ </div>
+ <div class="col-md-6 im-txt">
+ <div class="img-cls-l">
+ <img src="../../../assets/img/finepay.png">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
+ <div class="alval">
+ <div class="row">
+ <div class="col-md-6 ">
+ <div class="img-cls">
+ <img src="../../../assets/img/asset_poster_one.png">
+ </div>
+ </div>
+ <div class="col-md-6 ">
+ <div class="txt-cls">
+ <img class="logo-im" src="../../../assets/img/cabok-log.png">
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+ 1500s, when an unknown printer took a galley of type </p>
+ <div class="btn-mor"><button class="btn-cab">VIEW MORE</button></div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 ">
+ <div class="txt-cls-l">
+ <img src="../../../assets/img/bokdoc-logo.png">
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+ 1500s, when an unknown printer took a galley of type </p>
+ <div class="btn-mor"><button class="btn-doc">VIEW MORE</button></div>
+ </div>
+ </div>
+ <div class="col-md-6 ">
+ <div class="img-cls-l">
+ <img src="../../../assets/img/asset_poster_two.png">
+ </div>
+ </div>
+ </div>
+ <div class="row">
+
+ <div class="col-md-6 ">
+ <div class="img-cls">
+ <img src="../../../assets/img/asset_poster_four.png">
+ </div>
+ </div>
+ <div class="col-md-6 ">
+ <div class="txt-cls">
+ <img src="../../../assets/img/mom-logo.png">
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+ 1500s, when an unknown printer took a galley of type </p>
+ <div class="btn-mor"><button class="btn-mom">VIEW MORE</button></div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 ">
+ <div class="txt-cls-l">
+ <img src="../../../assets/img/finepay-logo.png">
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+ 1500s, when an unknown printer took a galley of type </p>
+ <div class="btn-mor"><button class="btn-fpay">VIEW MORE</button></div>
+ </div>
+ </div>
+ <div class="col-md-6 im-txt">
+ <div class="img-cls-l">
+ <img src="../../../assets/img/finepay.png">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/body/products/products.component.scss b/src/app/body/products/products.component.scss
new file mode 100644
index 0000000..620a7de
--- /dev/null
+++ b/src/app/body/products/products.component.scss
@@ -0,0 +1,193 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
+
+*{
+ font-family: 'Roboto', sans-serif;
+}
+
+.pro-main{
+
+ padding-top: 100px;
+ text-align: center;
+ height: auto;
+ width:auto;
+ margin-bottom: 50px;
+ .banner-color{
+ background-color: rgb(241, 241, 241);
+ // width:100%;
+ }
+ .ban-sun{
+ background: url("../../../assets/img/asset_map.png");
+ background-repeat: no-repeat;
+
+ background-size: 65%;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+
+ .sun-det{
+ padding-top: 99px;
+ // width:960px;
+ height:401px ;
+ }
+ .sun-det h3{
+ color: #171717;
+ font-size: 48px;
+ font-weight: 800;
+
+
+ }
+ .sun-det b{
+ color: #67af05;
+ font-weight: 800;
+ }
+ .sun-det hr{
+ width: 56px;
+ // height: 15px;
+ margin-top: 0px;
+
+ border-top: 9px solid rgb(140,195,60);
+ }
+ .sun-det p{
+ font-size: 20px;
+ color:#464646;
+ margin-top: 20px;
+ font-weight: 500;
+ }
+ .decl p{
+ font-size: 15px;
+ font-weight: 500;
+ margin-top: 25px;
+ }
+ /***************************************************************************************************************/
+ .products-det{
+ // text-align: center;
+ .nav{
+ padding-left:467px;
+ }
+
+ .nav-tabs{
+ border-bottom: none;
+ .nav-link{
+ padding: 5px 20px 5px 20px;
+ color: #6e6e6e;
+ object-fit: contain;
+ font-family: Roboto;
+ font-size: 16px;
+ font-weight: 300;
+ font-style: normal;
+ font-stretch: normal;
+ letter-spacing: normal;
+ text-align: left;
+ margin-top: 25px;
+ }
+ .active{
+ background-color: #7db532;
+ border-radius: 0px;
+ color: #ffffff;
+
+ }
+
+ }
+ .alval{
+ width: 100%;
+ .row{
+ margin-bottom: 13px;
+ margin-right: 0px;
+ margin-left: 0px;
+ }
+ .col-md-6{
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+ .img-cls{
+ width:70%;
+ margin-left: 167px;
+ }
+ .img-cls img{
+ width:100%;
+ height: 100%;
+ }
+ .txt-cls{
+ width: 70%;
+ height: 100%;
+ text-align:justify;
+ background: rgb(240,240,240);
+ padding: 30px;
+
+ .logo-im{
+ width:30%;
+ }
+ p{
+ font-size: 15px;
+ color: rgba(112, 112, 112, 0.92);
+ }
+ }
+ .txt-cls img{
+ width: 50%;
+ // height: 100%;
+ }
+ .img-cls-l{
+ width:70%;
+ height: 100%;
+
+ }
+ .img-cls-l img{
+ width:100%;
+ height: 100%;
+ }
+ .txt-cls-l{
+ width: 70%;
+ height: 100%;
+ text-align: left;
+ background: rgb(240,240,240);
+ padding: 30px;
+ margin-left: 167px;
+
+ p{
+ font-size: 15px;
+ color: rgba(112, 112, 112, 0.92);
+ }
+ }
+ .txt-cls-l img{
+ width: 50%;
+ // height: 100%;
+ }
+
+ .btn-mor button{
+ color:#ffff;
+ width: 100px;
+ height: 40px;
+ text-align: center;
+ font-size: 13px;
+ }
+ .btn-cab{
+ background: rgb(216,122,40);
+ border: 1px solid rgb(216,122,40);
+
+ }
+ .btn-doc{
+ background: rgb(160,31,98);
+ border: 1px solid rgb(160,31,98);
+
+ }
+ .btn-mom{
+ background: rgb(201,47,146);
+ border: 1px solid rgb(201,47,146);
+
+ }
+ .btn-fpay{
+ background: rgb(66,177,155);
+ border: 1px solid rgb(66,177,155);
+
+ }
+ }
+
+ }
+
+
+}
+
+
+
+
diff --git a/src/app/body/products/products.component.spec.ts b/src/app/body/products/products.component.spec.ts
new file mode 100644
index 0000000..563ae95
--- /dev/null
+++ b/src/app/body/products/products.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductsComponent } from './products.component';
+
+describe('ProductsComponent', () => {
+ let component: ProductsComponent;
+ let fixture: ComponentFixture<ProductsComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ProductsComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ProductsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/body/products/products.component.ts b/src/app/body/products/products.component.ts
new file mode 100644
index 0000000..2f7ca6c
--- /dev/null
+++ b/src/app/body/products/products.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-products',
+ templateUrl: './products.component.html',
+ styleUrls: ['./products.component.scss']
+})
+export class ProductsComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
new file mode 100644
index 0000000..dec40ac
--- /dev/null
+++ b/src/app/footer/footer.component.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+ <div class="foot-codeinfo">
+ <div class="container">
+ <div class="row">
+ <!-------------About--------------------->
+ <div class="col-md-4">
+ <div class="margins">
+ <h5>About Us</h5>
+ <p>Efficient elegant designed mobile templates for startups, developers, entrepreneurs & mores.</p>
+ </div>
+
+ </div>
+ <!--------------------------------our products------------------------------------------->
+ <div class="col-md-2">
+
+ <h5>Our Products</h5>
+
+ <li><a href="#!">Home InspireUI</a></li>
+ <li><a href="#!">SpotUI</a></li>
+ <li><a href="products"> Our products</a></li>
+ <li><a href="#!">Appstore (iOS)</a></li>
+ <!---- <li><a href="#!">Google Play (Android)</a></li>-->
+
+
+ </div>
+ <div class="margins-pro"></div>
+ <!---------------------------need help----------------------------------------------------------->
+ <div class="col-md-2">
+
+ <h5>Need Help</h5>
+
+
+ <li><a href="#!">Service</a></li>
+ <li><a href="#!">Terms of Service</a></li>
+ <li><a href="#!"> Privacy Policy</a></li>
+ <li><a href="#!">Blogs</a></li>
+ <!---- <li><a href="#!">Google Play (Android)</a></li>-->
+
+
+ </div>
+
+ <!---------------------------Get in Touch---------------------------------------------------------------->
+ <div class="col-md-4">
+
+ <h5>Get In Touch</h5>
+
+ <input type="text" class="txt-name" placeholder=" Name">
+ <input type="email" class="in-em" placeholder=" Email ID">
+
+ <textarea class="txt-mess" placeholder=" Message"></textarea>
+ <div class="btn-cnnt"><button type="button" class="send-btn">SEND</button></div>
+
+
+
+
+ </div>
+
+
+ </div>
+ </div>
+
+ </div>
+
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
new file mode 100644
index 0000000..8e41614
--- /dev/null
+++ b/src/app/footer/footer.component.scss
@@ -0,0 +1,100 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
+
+*{
+ font-family: 'Roboto', sans-serif;
+}
+
+/************************footer main classs**********************************/
+.foot-codeinfo{
+ width: auto;
+ height: auto;
+ background-color:rgb(28, 33,37);
+ color:#ffff;
+.row{
+ width: auto;
+}
+.margins{
+ border-right: 1px solid #636c72;
+ height: 220px;
+}
+.col-md-4{
+ margin: 0 auto;
+ max-width: 313px;
+ margin-top: 36px;
+ margin-bottom: 20px;
+ text-align: left;
+
+
+ input{
+ width: 212px;
+ height: 32px;
+ background-color: #333;
+ border:1px solid #333;
+ margin-bottom: 6px;
+ font-size: 14px;
+
+
+
+ }
+
+ .txt-mess{
+ width: 212px;
+
+ background-color: #333;
+ border:1px solid #333;
+ height: 76px;
+
+ font-size: 14px;
+ color:#636c72;
+ outline:none;
+ resize: none;
+ }
+ button{
+ height: 30px;
+ width: 88px;
+ color:#fff;
+ background-color:rgb(110, 165, 37);
+ border: 1px solid rgb(110, 165, 37);
+ font-size: 14px;
+
+ }
+ h5{
+ font-size: 19px;
+ font-weight: bold;
+ cursor: pointer;
+
+ }
+ p{
+ font-size: 14px;
+ }
+
+}
+.col-md-2{
+ margin: 0 auto;
+ margin-top: 36px;
+ border-right: 1px solid #636c72;
+ height: 220px;
+ margin-left:20px;
+ text-align: left;
+
+ h5{
+ font-size: 19px;
+ font-weight: bold;
+ cursor: pointer;
+ }
+ li{
+ list-style: none;
+ text-align: left;
+
+ }
+ a{
+ text-decoration: none;
+ color:#fff;
+ font-size: 14px;
+
+
+ }
+}
+
+
+}
diff --git a/src/app/footer/footer.component.spec.ts b/src/app/footer/footer.component.spec.ts
new file mode 100644
index 0000000..2ca6c45
--- /dev/null
+++ b/src/app/footer/footer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+ let component: FooterComponent;
+ let fixture: ComponentFixture<FooterComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ FooterComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FooterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts
new file mode 100644
index 0000000..da17d82
--- /dev/null
+++ b/src/app/footer/footer.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-footer',
+ templateUrl: './footer.component.html',
+ styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 8d507b6..63d7ed0 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -13,10 +13,10 @@
<a class="Text-Style nav-link" href="about">About us</a>
</li>
<li class="nav-item">
- <a class="Text-Style nav-link" href="#">Products</a>
+ <a class="Text-Style nav-link" href="products">Products</a>
</li>
<li class="nav-item">
- <a class="Text-Style nav-link" href="#">Contact us</a>
+ <a class="Text-Style nav-link" href="contact">Contact us</a>
</li>
<div class="icon_box"><img class="icon_facebook" src="../../assets/img/layer-8@3x.png"></div>
<div class="icon_box"><img class="icon_twitter" src="../../assets/img/layer-9@3x.png"></div>
diff --git a/src/assets/img/asset_map.png b/src/assets/img/asset_map.png
new file mode 100644
index 0000000..e09b476
Binary files /dev/null and b/src/assets/img/asset_map.png differ
diff --git a/src/assets/img/bokdoc-logo.png b/src/assets/img/bokdoc-logo.png
new file mode 100644
index 0000000..9ec5cc8
Binary files /dev/null and b/src/assets/img/bokdoc-logo.png differ
diff --git a/src/assets/img/cabok-log.png b/src/assets/img/cabok-log.png
new file mode 100644
index 0000000..8fb1043
Binary files /dev/null and b/src/assets/img/cabok-log.png differ
diff --git a/src/assets/img/finepay-logo.png b/src/assets/img/finepay-logo.png
new file mode 100644
index 0000000..3ca4ecd
Binary files /dev/null and b/src/assets/img/finepay-logo.png differ
diff --git a/src/assets/img/finepay.png b/src/assets/img/finepay.png
new file mode 100644
index 0000000..403f42c
Binary files /dev/null and b/src/assets/img/finepay.png differ
diff --git a/src/assets/img/mom-logo.png b/src/assets/img/mom-logo.png
new file mode 100644
index 0000000..7be20c9
Binary files /dev/null and b/src/assets/img/mom-logo.png differ
diff --git a/src/assets/responsive.scss b/src/assets/responsive.scss
index 0a1fdc1..3dc5933 100644
--- a/src/assets/responsive.scss
+++ b/src/assets/responsive.scss
@@ -220,6 +220,119 @@ h2{
}
}
}
+
+/******************contact**************************/
+.cnt{
+ .send-mail{
+ width: 86px !important;
+ height: 34px !important;
+ font-size: 15px !important;
+ }
+ .cnt-det{
+ input{
+ width: 150px !important;
+ height: 25px !important;
+ margin-bottom: 10px !important;
+ }
+ .txt-left{
+ margin-right: 0px !important;
+ }
+ .form-control{
+ width:311px !important;
+ height: 35px !important;
+ }
+
+ .mess-txt{
+ width: 311px !important;
+ height: 75px !important;
+ margin-bottom: 0px !important;
+ }
+
+ }
+
+ .head-cnt{
+ p {
+ font-size: 17px !important;
+ }
+
+ }
+}
+/*************footer************/
+.foot-codeinfo{
+ .row{
+ margin-left: 0px !important;
+ margin-right: 0px !important;
+ }
+ .col-md-4
+ {
+ margin-bottom: 5px !important;
+ margin-left:36px !important;
+ .margins{
+ border-right: 0 !important;
+ height: auto !important;
+ p{
+ font-size: 15px !important;
+ }
+ }
+ h5{
+ font-size: 19px !important;
+
+ }
+}
+ .col-md-2{
+ margin-left: 36px !important;
+ border-right: 0px !important;
+ height: auto !important;
+ margin-top: 20px !important;
+ h5{
+ font-size: 19px !important;
+ }
+ a{
+ font-size: 15px !important;
+ }
+ }
+}
+/****************product*******************************/
+.pro-main{
+ padding-top: 75px !important;
+ .ban-sun{
+ .sun-det{
+ h3{
+ font-size: 39px !important;
+ }
+ }
+ }
+ .products-det{
+ .decl{
+ p{
+ font-size: 18px !important;
+ }
+ }
+ .nav{
+ padding-left:86px !important;
+ }
+
+ .alval{
+ .img-cls {
+ width: 100% !important;
+ margin-left: 0 !important;
+ height: 100% !important;
+ }
+ .txt-cls{
+ width: 100% !important;
+ height: 100% !important;
+ }
+ .txt-cls-l{
+ width: 100% !important;
+ margin-left:0 !important;
+ }
+ .img-cls-l{
+ width:100% !important;
+ height: 100% !important;
+ }
+ }
+ }
+}
}
@@ -284,6 +397,65 @@ h2{
}
}
}
+ .foot-codeinfo{
+
+ .col-md-4{
+ max-width: 220px !important;
+ input{
+ width: 150px !important;
+ height: 22px !important;
+ }
+ textarea{
+ width: 150px !important;
+ height: 50px !important;
+ }
+ button{
+ height: 26px !important;
+ width: 59px !important;
+ }
+
+}
+}
+.pro-main{
+ padding-top: 75px !important;
+ .decl{
+ p{
+ font-size: 19px !important;
+ }
+ }
+ .products-det{
+ .nav{
+ padding-left:256px !important;
+ }
+
+ .alval{
+ .img-cls {
+ width: 100% !important;
+ margin-left: 0 !important;
+ height: 100% !important;
+ }
+ .txt-cls{
+ width: 100% !important;
+ height: 100% !important;
+ p{
+ font-size: 18px !important;
+ }
+ }
+
+ .txt-cls-l{
+ width: 100% !important;
+ margin-left:0 !important;
+ p{
+ font-size: 18px !important;
+ }
+ }
+ .img-cls-l{
+ width:100% !important;
+ height: 100% !important;
+ }
+ }
+ }
+}
}
/* 05.0 iPads (landscape) ----------- */
@@ -355,7 +527,21 @@ h2{
/* 15.0 Samsung Galaxy S5 ----------- */
-@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {}
+@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
+ .cnt{
+ .head-cnt{
+ p{
+ font-size: 18px !important;
+ }
+ }
+ }
+
+ .foot-codeinfo{
+ .col-md-4{
+ margin-left:25px !important;
+ }
+ }
+}
@media (max-width: 480px) {}