Scotch Cards

import { Component, OnInit } from '@angular/core';
import {Http} from "@angular/http";
import 'rxjs/add/operator/map';

@Component({
  selector: 'my-app',
  template: `
    <div class="gallery">
  <a class="gallery__item" clHref={{card.public_id}}  *ngFor="let card of cards">
    <div class="gallery__item-image">
      <cl-image public-id="{{card.public_id}}" class="img" format="jpg">
        		 <cl-transformation  width="150" quality="auto" crop="fill" fetch_format="auto"></cl-transformation>
      </cl-image>
    </div>
    <div class="gallery__item-content">{{card.created_at}} </div>
  </a>
</div>

  `
})

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app works!';
  cards = [];

  constructor(
    private http: Http
  ){}

  ngOnInit() {
    this.http.get('https://res.cloudinary.com/christekh/image/list/scotch.json')
      .map(data => data.json().resources)
      .subscribe(resources => { this.cards = resources });
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CloudinaryModule, CloudinaryConfiguration, provideCloudinary } from '@cloudinary/angular';


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    CloudinaryModule
  ],
  providers: [
    provideCloudinary(require('cloudinary-core'), { cloud_name: 'christekh' } as CloudinaryConfiguration)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

@import url('https://fonts.googleapis.com/css?family=Noto+Sans');

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans', sans-serif;
}

.gallery {
  width: 80%;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  perspective: 1000px;
}
.gallery__item {
  display: block;
  width: 48%;
  margin-bottom: 15px;
  transform: rotateZ(0deg);
  transition: all 400ms ease-out;
  box-shadow: 2px 3px 3px 2px rgba(15, 15, 15, 0.2);
}

.gallery__item:nth-child(odd) {
  transform-origin: top left;
}

.gallery__item:nth-child(even) {
  transform-origin: top right;
}

.gallery__item:nth-child(odd):hover {

  transform: rotateZ(5deg);
  box-shadow: 2px 3px 3px 4px rgba(15, 15, 15, 0.1);
}

.gallery__item:nth-child(even):hover {
  transform: rotateZ(-5deg);
  box-shadow: 2px 3px 3px 4px rgba(15, 15, 15, 0.1);
}



.gallery__item-image {
  /*margin-bottom: -5px;*/
}

.gallery__item-image .img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.gallery__item-content {
  background: rgba(15,15,15,0.8);
  color: #ffffff;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.63;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Scotch Cards</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfills for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
    <script>
      System.config({
        map: {
          '@cloudinary/angular': 'npm:@cloudinary/angular',
          'cloudinary-core': 'npm:cloudinary-core',
        },
        packages: {
          '@cloudinary/angular': {
            main: 'index.js',
            defaultExtension: 'js'
          },
          'cloudinary-core': {
            main: 'cloudinary-core-shrinkwrap.js',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>