taped fotorama on home page

assets/style/tape-viewer.scss

@@ -0,0 +1,43 @@
+.tape-block{
+  width: 70%;
+  max-width: 700px;
+  min-width: 300px;
+
+  margin: 100px auto 0;
+}
+
+.tape-block-content{
+  position: relative;
+  width: 100%;
+
+  .tape {
+    width: 98px;
+    height: 98px;
+    position: absolute;
+    z-index: 10;
+  }
+
+  .tape-tl {
+    top: -25px;
+    left: -25px;
+    background-image: url(/graphics/tape-tl.png);
+  }
+
+  .tape-tr {
+    top: -25px;
+    right: -25px;
+    background-image: url(/graphics/tape-tr.png);
+  }
+
+  .tape-bl {
+    bottom: 0;
+    left: -25px;
+    background-image: url(/graphics/tape-lb.png);
+  }
+
+  .tape-br {
+    bottom: 0;
+    right: -25px;
+    background-image: url(/graphics/tape-rb.png);
+  }
+}

client/pages/home.js

@@ -5,5 +5,7 @@
 module.exports = function (app) {
     app.controller("HomePageController", function ($scope) {
         $scope.pageClass = "page-home";
+
+        $(".fotorama").fotorama();
     });
 };

views/home.html

@@ -1,3 +1,23 @@
 <div>
+    <div class="tape-block">
+        <div class="tape-block-content">
+            <div class="tape tape-tl"></div>
+            <div class="tape tape-tr"></div>
+            <div class="tape tape-bl"></div>
+            <div class="tape tape-br"></div>
+            <div class="fotorama"
+                 data-transition="crossfade"
+                 data-autoplay="6000"
+                 data-arrows="false"
+                 data-width="100%"
+                 data-fit="cover"
+                 data-loop="true">
+                <img src="http://static.shlisselburg.org/art/graphics/sample2.jpg" alt="">
+                <img src="http://static.shlisselburg.org/art/graphics/sample4.jpg" alt="">
+                <img src="http://static.shlisselburg.org/art/graphics/sample5.jpg" alt="">
+            </div>
+        </div>
+    </div>
+
     <timeline></timeline>
 </div>

views/index.html

@@ -11,6 +11,10 @@
     <script src="/bower_components/angular/angular.min.js"></script>
     <script src="/bower_components/angular-route/angular-route.min.js"></script>
     <script src="/bower_components/angular-animate/angular-animate.min.js"></script>
+
+    <link rel="stylesheet" href="/bower_components/fotorama/fotorama.css">
+    <script src="/bower_components/fotorama/fotorama.js"></script>
+
     <script src="data.js"></script>
     <script src="/app.js"></script>
 </head>