Merge branch 'abraham' into 'master'

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.scss

@@ -48,6 +48,7 @@
         .map_contents{
             padding-top: 300px;
             padding-bottom: 250px;
+            .slick_main{
                 .row{
                     .col-md-5{
                         display: flex;
@@ -102,6 +103,7 @@
                                 color: #ffffff;
                                 img{
                                     padding-left: 3px;
+                                    display: inline;
                                 }
                             }
                         }
@@ -119,6 +121,7 @@
                 }
             }
         }
+    }
 }
 .our_products{
     background-color: #ffffff;
@@ -326,6 +329,8 @@ hr{
         margin: 0 auto;
         margin-bottom: 75px;
         padding-top: 36px;
+        ngx-slick-carousel{
+            .rating_slide{
                 .rating_review_box_one{
                     margin: 23px 16px 24px 16px;
                     .row{
@@ -398,4 +403,6 @@ hr{
                     }
                 }
             }
+        }
+    }
 }
\ No newline at end of file

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,6 +159,8 @@ h2{
 	}
 	.rating_review_box{
 		padding-top: 20px !important;
+		ngx-slick-carousel{
+			.rating_slide{
 				.rating_review_box_one{
 					.row{
 						.rating_head{
@@ -175,6 +186,9 @@ h2{
 						.rating_content{
 							font-size: 18px !important;
 							margin: 25px 15px 25px 15px !important;
+							line-height: 1.5 !important;
+						}
+					}
 				}
 			}
 		}

src/styles.scss

@@ -4,3 +4,29 @@
 .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