diff --git a/angular.json b/angular.json
index 645b37e..4f49f0a 100644
--- a/angular.json
+++ b/angular.json
@@ -30,12 +30,15 @@
"src/styles.scss",
"src/assets/responsive.scss",
"node_modules/bootstrap/dist/css/bootstrap.css",
+ "node_modules/slick-carousel/slick/slick.scss",
+ "node_modules/slick-carousel/slick/slick-theme.scss",
"node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/jquery/dist/jquery.min.js",
- "node_modules/bootstrap/dist/js/bootstrap.js"
+ "node_modules/bootstrap/dist/js/bootstrap.js",
+ "node_modules/slick-carousel/slick/slick.min.js"
],
"es5BrowserSupport": true
},
diff --git a/package-lock.json b/package-lock.json
index 01007dd..6bb643c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -121,14 +121,6 @@
"rxjs": "6.3.3"
}
},
- "@angular/animations": {
- "version": "7.2.15",
- "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-7.2.15.tgz",
- "integrity": "sha512-8oBt3HLgd2+kyJHUgsd7OzKCCss67t2sch15XNoIWlOLfxclqU+EfFE6t/vCzpT8/+lpZS6LU9ZrTnb+UBj5jg==",
- "requires": {
- "tslib": "^1.9.0"
- }
- },
"@angular/cli": {
"version": "7.3.9",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-7.3.9.tgz",
@@ -6423,6 +6415,14 @@
"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
"dev": true
},
+ "ngx-slick-carousel": {
+ "version": "0.4.4",
+ "resolved": "https://registry.npmjs.org/ngx-slick-carousel/-/ngx-slick-carousel-0.4.4.tgz",
+ "integrity": "sha512-z/cu8CL7LlUaqtImxC595V644efgjHTdQ9+u3AqL/igQYSELRryENGVH0jyPZuJSpSNvi52I2HGeifPsEd7bkg==",
+ "requires": {
+ "tslib": "^1.9.0"
+ }
+ },
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -8444,6 +8444,11 @@
"integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
"dev": true
},
+ "slick-carousel": {
+ "version": "1.8.1",
+ "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+ "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
+ },
"smart-buffer": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.0.2.tgz",
diff --git a/package.json b/package.json
index 021ad04..bf4d3d5 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
},
"private": true,
"dependencies": {
- "@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
@@ -24,7 +23,9 @@
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
+ "ngx-slick-carousel": "^0.4.4",
"rxjs": "~6.3.3",
+ "slick-carousel": "^1.8.1",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
diff --git a/src/app/body/body.module.ts b/src/app/body/body.module.ts
index 0f55277..d7b1a87 100644
--- a/src/app/body/body.module.ts
+++ b/src/app/body/body.module.ts
@@ -4,14 +4,19 @@ 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,ProductsComponent,ContactComponent],
imports: [
CommonModule,
- moduleRouting
+ moduleRouting,
+ SlickCarouselModule
]
})
export class BodyModule { }
diff --git a/src/app/body/landingpage/landingpage.component.html b/src/app/body/landingpage/landingpage.component.html
index bf67746..1f0c4cd 100644
--- a/src/app/body/landingpage/landingpage.component.html
+++ b/src/app/body/landingpage/landingpage.component.html
@@ -1,24 +1,64 @@
<div class="backgnd_grey">
<div class="map_overlay">
<div class="container map_contents">
- <div class="row">
- <div class="col-md-5">
- <div class="left_side">
- <span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span>
- is simply dummy text
- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the</p>
- <div class="get_info" href="#">
- Get info
- <img src="../../../assets/img/asset_white_arrow.png" alt="arrow">
- </div>
- </div>
+ <ngx-slick-carousel class="carousel"
+#slickModal="slick-carousel"
+[config]="firstConfig">
+<div ngxSlickItem class="row">
+ <div class="col-md-5">
+ <div class="left_side">
+ <span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span>
+ is simply dummy text
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the</p>
+ <div class="get_info" href="#">
+ Get info
+ <img src="../../../assets/img/asset_white_arrow.png" alt="arrow">
+ </div>
</div>
- <div class="col-md-7">
- <div class="right_side">
- <img src="../../../assets/img/asset_banner_img.png">
- </div>
+ </div>
+ <div class="col-md-7">
+ <div class="right_side">
+ <img src="../../../assets/img/asset_banner_img.png">
+ </div>
+ </div>
+</div>
+<div ngxSlickItem class="row">
+ <div class="col-md-5">
+ <div class="left_side">
+ <span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span>
+ is simply dummy text
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the</p>
+ <div class="get_info" href="#">
+ Get info
+ <img src="../../../assets/img/asset_white_arrow.png" alt="arrow">
+ </div>
</div>
</div>
+ <div class="col-md-7">
+ <div class="right_side">
+ <img src="../../../assets/img/asset_banner_img.png">
+ </div>
+ </div>
+</div>
+<div ngxSlickItem class="row">
+ <div class="col-md-5">
+ <div class="left_side">
+ <span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span>
+ is simply dummy text
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the</p>
+ <div class="get_info" href="#">
+ Get info
+ <img src="../../../assets/img/asset_white_arrow.png" alt="arrow">
+ </div>
+ </div>
+ </div>
+ <div class="col-md-7">
+ <div class="right_side">
+ <img src="../../../assets/img/asset_banner_img.png">
+ </div>
+ </div>
+</div>
+</ngx-slick-carousel>
</div>
</div>
</div>
diff --git a/src/app/body/landingpage/landingpage.component.ts b/src/app/body/landingpage/landingpage.component.ts
index bc5bf37..c3ad6e7 100644
--- a/src/app/body/landingpage/landingpage.component.ts
+++ b/src/app/body/landingpage/landingpage.component.ts
@@ -11,5 +11,5 @@ export class LandingpageComponent implements OnInit {
ngOnInit() {
}
-
+ slideConfig = {"slidesToShow": 1, "slidesToScroll": 1,"dots":true,"arrow":false, responsive:[{breakpoint:480,settings:{slidesToShow:1}}]};
}
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index e0b2954..65fb27e 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,3 +1,6 @@
+.nav_color{
+ background-color: red;
+}
nav{
position: fixed;
width: 100%;
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 591e148..d2d4fd0 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,13 +1,29 @@
import { Component, OnInit } from '@angular/core';
+import * as $ from 'jquery';
+
+declare const window: any;
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
+ constructor() {
+
- constructor() { }
+ $(window).scroll(function(){
+
+ var custom = $('.navbar'),
+
+ scroll = $(window).scrollTop();
+ console.log(scroll);
+ if(scroll > 1) custom.addClass("nav_color");
+
+ else custom.removeClass("nav_color");
+
+ });
+ }
ngOnInit() {
}
diff --git a/src/assets/responsive.scss b/src/assets/responsive.scss
index 1676f3b..24f10d3 100644
--- a/src/assets/responsive.scss
+++ b/src/assets/responsive.scss
@@ -154,16 +154,27 @@ h2{
.row{
.rating_head{
.rating_star{
- margin: 0px 10px 0px 10px !important;
+ margin: 0px 0px 0px 4px !important;
+ line-height: 1.5 !important;
+ }
+ .for-design-quality{
+ padding: 5px 16px 0px 0px !important;
+ float: right !important;
+ font-size: 19px !important;
+ line-height: 1.5 !important;
}
.kochi_taxi{
- padding: 0px 10px 0px 0px !important;
+ padding: 0px 0px 0px 0px !important;
+ font-size: 19px !important;
+ text-align: center !important;
+ float: none !important;
}
}
}
.rating_body{
.rating_content{
- margin: 35px 15px 35px 15px !important;
+ font-size: 18px !important;
+ margin: 25px 15px 25px 15px !important;
}
}
}