changes

ng8-seed/src/app/components/project-list/project-list.component.html

@@ -366,6 +366,60 @@
              </div>
          </div> -->
      </div>
+<!-- <div class="mt-2">
+    <mat-card-title><h5 class="mt-2 mb-1 text-center">Projects Count</h5></mat-card-title>
+    <hr style="border-top:2px solid rgb(81, 202, 202) !important;width:190px !important;">
+    <div fxLayout="row" class="text-xs-center mt-2 mb-2">
+        <div fxFlex="33">
+           <h2 class="mt-0" style="color: #f9a22b !important;"><span>23,8</span>K</h2>
+           <p>Construction</p>
+        </div>
+        <div fxFlex="33">
+           <h2 class="mt-0" style="color: #000000 !important;"><span>23,000</span>K</h2>
+           <p>Construction</p>
+        </div>
+        <div fxFlex="33">
+           <h2 class="mt-0" style="color: #61c524 !important;"><span>25,000</span>K</h2>
+           <p>Construction</p>
+        </div>
+        <div fxFlex="33">
+         <h2 class="mt-0" style="color: #a978e0 !important;"><span>30,000</span>K</h2>
+         <p>Construction</p>
+      </div>
+     </div>
+</div> -->
+     <div class="mt-2">
+            <mat-card-title><h5 class="mt-2 mb-1 text-center">Our Clients</h5></mat-card-title>
+            <hr style="border-top:2px solid rgb(81, 202, 202) !important;width:190px !important;">
+        <div fxLayout="row" class="text-xs-center mt-2">
+            <div fxFlex="33" style="border-right: 1px solid #51caca;">
+             <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" class="logo_one" style=" width: 200px;"></a>
+            </div>
+            <div fxFlex="33" style="border-right: 1px solid #51caca;">
+             <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" class="logo_one" style=" width: 200px;"></a>
+            </div>
+            <div fxFlex="33" style="border-right: 1px solid #51caca;">
+             <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" class="logo_one" style=" width: 200px;"></a>
+            </div>
+            <div fxFlex="33">
+             <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" class="logo_one" style=" width: 200px;"></a>
+          </div>
+         </div>
+         <div fxLayout="row" class="text-xs-center mt-3 mb-2">
+           <div fxFlex="33" style="border-right: 1px solid #51caca;">
+             <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" class="logo_one" style=" width: 200px;"></a>
+           </div>
+           <div fxFlex="33" style="border-right: 1px solid #51caca;">
+             <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" class="logo_one" style=" width: 200px;"></a>
+           </div>
+           <div fxFlex="33" style="border-right: 1px solid #51caca;">
+             <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" class="logo_one" style=" width: 200px;"></a>
+           </div>
+           <div fxFlex="33">
+             <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" class="logo_one" style=" width: 200px;"></a>
+         </div>
+        </div>
+     </div>
      </mat-card>
 
      <!-- <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">

ng8-seed/src/app/components/project-list/project-list.component.scss

@@ -196,4 +196,13 @@ mat-card{
     padding:0;
     height: 100%;
     width:100%;
-}
+}
+.logo_one {
+    transition: transform 1.5s;    
+  }
+  .logo_one:hover, .logo_one:focus {
+    transform: scale3d(1.186, 1.186, 2);
+  }
+  .logo_one:hover::after, .logo_one:focus::after {
+    opacity: 1;
+  }

ng8-seed/src/app/dashboard/dashboard.component.html

@@ -1,7 +1,8 @@
 <!-- <app-layout></app-layout> -->
 <div id="top"></div>
+<mat-card class="p-3">
 <div fxLayout="row wrap">
-   <div fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="30" fxFlex.lg="200" fxFlex.xl="30">
+   <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
  <div  class="container">
     <!-- <div class="form-bg"> 
          <div fxLayout="column" fxLayoutAlign="center"> 
@@ -17,8 +18,7 @@
                       <div class="text-center m-color">
                          <i [class]="flex_value.icon"></i>
                          <div class="d-inline-block">
-                            <h5>{{flex_value.name}}</h5>
+5                         </div>
-                         </div>
                       </div>
                    </div>
                </mat-card>
@@ -44,7 +44,35 @@ showCaptions="true"
   <button mat-stroked-button class="text">Contribute</button>
 </div> 
 </div>
-</div></div>
+</div>
+<div class="text-center" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
+<div class="mt-2">
+    <mat-card-title><h5 class="mt-2 mb-1 text-center">Projects Count</h5></mat-card-title>
+    <hr style="border-top:2px solid rgb(81, 202, 202) !important;width:190px !important;">
+    <div fxLayout="row" class="text-center mt-2 mb-2">
+        <div fxFlex="50">
+           <h2 class="mt-0" style="color: #f9a22b !important;"><span>23,8</span>K</h2>
+           <p>Construction</p>
+        </div>
+        <div fxFlex="50">
+           <h2 class="mt-0" style="color: #000000 !important;"><span>23,000</span>K</h2>
+           <p>Construction</p>
+        </div> 
+     </div>
+     <div fxLayout="row" class="text-center mt-2 mb-2">
+         <div fxFlex="50">
+            <h2 class="mt-0" style="color: #61c524 !important;"><span>25,000</span>K</h2>
+            <p>Construction</p>
+         </div>
+         <div fxFlex="50">
+          <h2 class="mt-0" style="color: #a978e0 !important;"><span>30,000</span>K</h2>
+          <p>Construction</p>
+       </div>
+      </div>
+</div>
+</div>
+</div>
+</mat-card> 
 <!-- <hr/> -->
 <!-- <mdb-carousel class="carousel slide carousel-fade" >
     <mdb-carousel-item>
@@ -78,7 +106,7 @@ showCaptions="true"
       </div>
     </mdb-carousel-item>
   </mdb-carousel> -->
-<div >
+<div class="mt-3">
 
 <!-- <mat-card>
   <mat-card-header>
@@ -91,7 +119,76 @@ showCaptions="true"
 </mat-card-content>
 </mat-card> -->
 <app-project-list></app-project-list>
-</div>
+</div> 
+     <!-- <mat-card class="mt-3">
+        <div fxLayout="row wrap" class="mb-3"> 
+           <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="content-data">
+              <figure>
+                 <mat-card-content>
+                    <div fxLayout="row" class="text-xs-center">
+                       <div fxFlex="33">
+                          <h2 class="mt-0" style="color: #f9a22b !important;"><span>23,8</span>K</h2>
+                          <p>Construction</p>
+                       </div>
+                       <div fxFlex="33">
+                          <h2 class="mt-0" style="color: #000000 !important;"><span>23,000</span>K</h2>
+                          <p>Construction</p>
+                       </div>
+                       <div fxFlex="33">
+                          <h2 class="mt-0" style="color: #61c524 !important;"><span>25,000</span>K</h2>
+                          <p>Construction</p>
+                       </div>
+                       <div fxFlex="33">
+                        <h2 class="mt-0" style="color: #a978e0 !important;"><span>30,000</span>K</h2>
+                        <p>Construction</p>
+                     </div>
+                    </div>
+                 </mat-card-content> 
+              </figure>
+           </div>
+        </div>
+     </mat-card>  -->
+     <!-- <mat-card class="mt-3">
+      <div fxLayout="row wrap" class="mb-3"> 
+         <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="content-data">
+            <figure>
+               <mat-card-content>
+                  <div fxLayout="row" class="text-xs-center">
+                     <div fxFlex="33" style="border-right: 1px solid cadetblue;">
+                      <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
+                     </div>
+                     <div fxFlex="33" style="border-right: 1px solid cadetblue;">
+                      <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
+                     </div>
+                     <div fxFlex="33" style="border-right: 1px solid cadetblue;">
+                      <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
+                     </div>
+                     <div fxFlex="33">
+                      <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
+                   </div>
+                  </div>
+                  <div fxLayout="row" class="text-xs-center mt-3">
+                    <div fxFlex="33" style="border-right: 1px solid cadetblue;">
+                      <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
+                    </div>
+                    <div fxFlex="33" style="border-right: 1px solid cadetblue;">
+                      <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
+                    </div>
+                    <div fxFlex="33" style="border-right: 1px solid cadetblue;">
+                      <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
+                    </div>
+                    <div fxFlex="33">
+                      <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
+                  </div>
+                 </div>
+               </mat-card-content> 
+            </figure>
+         </div>
+      </div>
+      
+   </mat-card> -->
+
+
 <footer class="footer">
   <h5>&#9400; TN Schools, All rights reserved</h5>
  </footer>

ng8-seed/src/app/dashboard/dashboard.component.scss

@@ -678,8 +678,9 @@ hr{
 
 
 .container {
+    min-width: auto !important;
     position: relative;
-    width: 200%;
+    width: 100% !important;
     margin-left: -2px;
     // margin-right: 100px;
   }
@@ -687,12 +688,13 @@ hr{
   .image {
     opacity: 1;
     display: block;
-    width: 156%;
+    width: auto;
     position: relative;
 //    padding:40px;
     height: auto;
     transition: .5s ease;
     backface-visibility: hidden;
+    box-shadow: 10px 10px 60px 0 rgba(0,0,0,.75) !important;
   }
   
   .middle {
@@ -700,7 +702,7 @@ hr{
     opacity: 0;
     position: absolute;
     top: 50%;
-    left: 76%;
+    left: 50%;
     transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     text-align: center;

ng8-seed/src/app/dashboard/dashboard.component.ts

@@ -7,8 +7,8 @@ import { Component } from '@angular/core';
 })
 export class DashboardComponent { 
   txt:string;
-  height:string="550px"
+  height:string="400px"
-  width:string="500px;"
+  width:string="300px;"
   imageSources=[{
     // url:'https://cdn.vox-cdn.com/uploads/chorus_image/image/56748793/dbohn_170625_1801_0018.0.0.jpg',
     url:'assets/images/csr-img/IMG_2535.jpg',