image panel

src/app/home/home.component.html

@@ -30,3 +30,6 @@ <h1>Tickets</h1>
   <app-top-partner-panel *ngFor="let partner of partners | async" [companies]="partner.companies"
                          [groupName]="partner.name" [main]="true"></app-top-partner-panel>
 </div>
+<div class="container-photo">
+  <app-photo-panel></app-photo-panel>
+</div>

src/app/home/home.component.scss

@@ -31,11 +31,17 @@
   text-align: center;
 }
 
-.containerFourth {
+.container-fourth {
   width: 100%;
   text-align: center;
 
   app-partner-panel {
     width: 100%;
   }
 }
+
+.container-photo {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  min-width: 100%;
+}

src/app/home/home.module.ts

@@ -17,6 +17,7 @@ import {InvoiceFormComponent} from './invoice-form/invoice-form.component';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {TopPartnerLogoComponent} from './top-partner-logo/top-partner-logo.component';
 import {TopPartnerPanelComponent} from './top-partner-panel/top-partner-panel.component';
+import {PhotoPanelComponent} from './photo-panel/photo-panel.component';
 
 @NgModule({
   imports: [
@@ -38,7 +39,8 @@ import {TopPartnerPanelComponent} from './top-partner-panel/top-partner-panel.co
     TicketAdditionalInfoComponent,
     TicketsComponent,
     TopPartnerLogoComponent,
-    TopPartnerPanelComponent
+    TopPartnerPanelComponent,
+    PhotoPanelComponent
   ],
   entryComponents: [
     TicketAdditionalInfoComponent,

src/app/home/photo-panel/photo-panel.component.html

@@ -0,0 +1,26 @@
+<div class="panel-holder">
+  <div class="photos-holder">
+    <div class="more-photos-info">
+      <h1>More photos</h1>
+    </div>
+    <div class="mover">
+      <img class="photo" src="assets/images/show1-min.jpg">
+
+      <img class="photo" src="assets/images/show1-min.jpg">
+
+      <img class="photo" src="assets/images/show1-min.jpg">
+
+      <img class="photo" src="assets/images/show1-min.jpg">
+
+      <img class="photo" src="assets/images/show1-min.jpg">
+
+      <img class="photo" src="assets/images/show1-min.jpg">
+
+      <img class="photo" src="assets/images/show1-min.jpg">
+    </div>
+  </div>
+</div>
+
+<div class="tech-slideshow">
+  <div class="mover-1"></div>
+</div>

src/app/home/photo-panel/photo-panel.component.scss

@@ -0,0 +1,58 @@
+.panel-holder {
+  box-shadow: 0 0 0.5rem #fff;
+  border-top: 1px solid white;
+  border-bottom: 1px solid white;
+  height: 250px;
+  overflow: hidden;
+}
+
+.photos-holder {
+  float: left;
+  min-width: 100%;
+  height: 100%;
+  position: relative;
+  transform: translate3d(0, 0, 0);
+
+  img {
+    transition: .3s all;
+  }
+
+  .mover {
+    width: min-content;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    overflow: hidden;
+    transform: translate3d(0, 0, 0);
+    animation: moveSlideshow 12s linear infinite;
+  }
+
+  .more-photos-info {
+    text-align: center;
+    z-index: 2;
+    position: absolute;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+}
+
+.photos-holder:hover {
+  cursor: pointer;
+
+  img {
+    filter: blur(0px) grayscale(50%);
+    -webkit-filter: blur(7px) grayscale(50%);
+  }
+
+  .more-photos-info {
+    opacity: 1;
+  }
+}
+
+.photo {
+  display: inline-block;
+  height: 100%;
+}

src/app/home/photo-panel/photo-panel.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-photo-panel',
+  templateUrl: './photo-panel.component.html',
+  styleUrls: ['./photo-panel.component.scss']
+})
+export class PhotoPanelComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}