4:30pm

src/app/body/aboutus/aboutus.component.html

@@ -67,19 +67,19 @@
           <div class="container">
             <div class="row">
                 <div class="col-md-3">
-                    <h3>300+</h3>
+                    <h3><span class="count">300</span>+</h3>
                     <h5>Active Clients</h5>
                 </div>
                 <div class="col-md-3">
-                    <h3>5000+</h3>
+                    <h3><span class="count">5000</span>+</h3>
                     <h5>Sales</h5>
                 </div>
                 <div class="col-md-3">
-                    <h3>35+</h3>
+                    <h3><span class="count">35</span>+</h3>
                     <h5>Products</h5>
                 </div>
                 <div class="col-md-3">
-                    <h3>80%+</h3>
+                    <h3><span class="count">80</span>%</h3>
                     <h5>Satisfied Clients</h5>
                 </div>
             </div>

src/app/body/aboutus/aboutus.component.scss

@@ -186,7 +186,7 @@
                         h5{
                             text-align: center !important;
                             object-fit: contain;
-                            font-family: Myriad Pro;
+                            font-family: Roboto;
                             font-size: 27.5px;
                             font-weight: normal;
                             font-style: normal;

src/app/body/aboutus/aboutus.component.ts

 import { Component, OnInit } from '@angular/core';
-
+import * as $ from 'jquery';
 @Component({
   selector: 'app-aboutus',
   templateUrl: './aboutus.component.html',
@@ -7,9 +7,22 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AboutusComponent implements OnInit {
 
-  constructor() { }
+  constructor() {
+ 
+   }
 
   ngOnInit() {
+    $('.count').each(function () {
+      $(this).prop('Counter',0).animate({
+          Counter: $(this).text()
+      }, {
+          duration: 12000,
+          easing: 'swing',
+          step: function (now) {
+              $(this).text(Math.ceil(now));
+          }
+      });
+  });
   }
 
 }

src/app/body/landingpage/landingpage.component.ts

@@ -11,5 +11,6 @@ export class LandingpageComponent implements OnInit {
 
   ngOnInit() {
   }
-  slideConfig = {"slidesToShow": 1, "slidesToScroll": 1,"dots":true,"arrow":false, responsive:[{breakpoint:480,settings:{slidesToShow:1}}]};
+  firstConfig = {"slidesToShow": 1, "slidesToScroll": 1,"arrows": false,"dots":true,"autoplay":true,"autoplaySpeed":2000};
+  ratingConfig = {"slidesToShow": 1, "slidesToScroll": 1,"arrows": true,"autoplay":true,"autoplaySpeed":2000,responsive:[{breakpoint:480,settings:{arrows:false}}]};
 }

src/app/header/header.component.scss

 .nav_color{
-    background-color: red;
+    background-color: #ffff;
 }
 nav{
     position: fixed;
     width: 100%;
     z-index: 10;
     .logo{
-        max-width: 380px;
-        max-height: 78px;
         img{
-            width: 100%;
+            width: 80%;
             height: 100%;
         }
     }

src/assets/responsive.scss

@@ -40,16 +40,22 @@
 nav{
 	.logo{
 		max-width: 250px !important;
+		img{
+			width: 100% !important;
+		}
 	}
 	.navbar-collapse{
+		margin-left: 0px !important;
 		ul{
+			flex-direction: row !important;
 			li{
+				width: 75px !important;
 				a{
-					text-align: left !important;
+					text-align: center !important;
 				}
 			}
 			.icon_box{
-				margin-bottom: 10px !important;
+				display: none !important;
 			}
 		}
 	}
@@ -140,6 +146,9 @@ h2{
 					width: 110px !important;
 					height: 100px !important;
 				}
+				h4{
+					font-size: 18px !important;
+				}
 			}
 		}
 	}
@@ -150,33 +159,38 @@ h2{
 	}
 	.rating_review_box{
 		padding-top: 20px !important;
-		.rating_review_box_one{
-			.row{
-				.rating_head{
-					.rating_star{
-						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;
+		ngx-slick-carousel{
+			.rating_slide{
+				.rating_review_box_one{
+					.row{
+						.rating_head{
+							.rating_star{
+								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 0px 0px 0px !important;
+								font-size: 19px !important;
+								text-align: center !important;
+								float: none !important;
+							}
+						}
 					}
-					.kochi_taxi{
-						padding: 0px 0px 0px 0px !important;
-						font-size: 19px !important;
-						text-align: center !important;
-						float: none !important;
+					.rating_body{
+						.rating_content{
+							font-size: 18px !important;
+							margin: 25px 15px 25px 15px !important;
+							line-height: 1.5 !important;
+						}
 					}
 				}
 			}
-			.rating_body{
-				.rating_content{
-					font-size: 18px !important;
-					margin: 25px 15px 25px 15px !important;
-				}
-			}
 		}
 	}
 }

src/styles.scss

@@ -3,4 +3,30 @@
 @import url("http://allfont.net/allfont.css?fonts=franklin-gothic-demi-cond");
 .clear{
     clear: both;
+}
+.rating_review_box{
+    ngx-slick-carousel{
+        .slick-prev{
+            left: -40px;
+            height: auto;
+            width: auto;
+            &:before{
+                background-color: #000;
+                border: 1px solid #000;
+                border-radius: 50%;
+                font-size: 30px;
+            }
+        }
+        .slick-next{
+            right: -40px;
+            height: auto;
+            width: auto;
+            &:before{
+                background-color: #000;
+                border: 1px solid #000;
+                border-radius: 50%;
+                font-size: 30px;
+            }
+        }
+    }
 }
\ No newline at end of file