Hey guys! I decided to create this simple Film Review UI Concept! I hope you like it! Made using Angular JS! I got my inspiration from this Dribble shot - https://dribbble.com/shots/2335651-Hotel-profile-widget
A Pen by Jack Thomson on CodePen.
| <html ng-app='filmReviewer' ng-cloak='true'> | |
| <div class='container'> | |
| <div class='card' ng-controller='filmController as vm'> | |
| <div class='card_controls'> | |
| <i class='material-icons' ng-click='vm.next()'>keyboard_arrow_right</i> | |
| <i class='material-icons' ng-click='vm.prev()'>keyboard_arrow_left</i> | |
| <div class='rating fade-in' ng-if='vm.id == film.id' ng-repeat='film in vm.films track by $index'> | |
| <p>{{film.rating}}</p> | |
| </div> | |
| </div> | |
| <div class='card_sub_information top-to-bottom' ng-if='vm.id == film.id' ng-repeat='film in vm.films track by $index'> | |
| <h1>{{film.title}}</h1> | |
| <p>{{film.genre}}</p> | |
| <button ng-if='film.booking'>Book {{film.title}}</button> | |
| <button ng-if='!film.booking'>Buy {{film.title}}</button> | |
| </div> | |
| <div class='card_overlay fade-in' ng-if='vm.id == film.id' ng-repeat='film in vm.films track by $index'> | |
| <div class="img-container"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/{{film.image}}.jpg" /> | |
| </div> | |
| <div class='card_overlay__information fade-in' ng-if='vm.id == film.id' ng-repeat='film in vm.films'> | |
| <h1>{{film.title}}</h1> | |
| <p>{{film.information}}</p> | |
| <i class='material-icons'>query_builder</i> | |
| <span>{{film.length}}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </html> |
| (function() { | |
| 'use strict' | |
| angular | |
| .module('filmReviewer', ['ngAnimate']) | |
| .controller('filmController', filmController) | |
| function filmController() { | |
| var vm = this, | |
| index; | |
| vm.id = 1; | |
| vm.films = [{ | |
| id: 1, | |
| title: 'Ex Machina', | |
| information: 'A young programmer is selected to participate in a ground-breaking experiment in synthetic intelligence by evaluating the human qualities of a breath-taking humanoid A.I', | |
| rating: 9.8, | |
| genre: 'Sci-fi', | |
| length: '1h 50min', | |
| image: 'ex-machina', | |
| booking: false | |
| }, { | |
| id: 2, | |
| title: 'Divergent', | |
| information: 'In a world divided by factions based on virtues, Tris learns shes Divergent and wont fit in. When she discovers a plot to destroy Divergents, Tris and the mysterious Four must find out what makes Divergents dangerous before its too late', | |
| rating: 7.9, | |
| genre: 'Adventure', | |
| length: '2h 20min', | |
| image: 'divergent', | |
| booking: true | |
| }, { | |
| id: 3, | |
| title: 'Deadpool', | |
| information: 'A former Special Forces operative turned mercenary is subjected to a rogue experiment that leaves him with accelerated healing powers, adopting the alter ego Deadpool', | |
| rating: 9.5, | |
| genre: 'Action', | |
| length: '1h 48min', | |
| image: 'deadpool', | |
| booking: true | |
| }]; | |
| vm.next = next; | |
| vm.prev = prev; | |
| function next() { | |
| if (vm.id < vm.films.length) { | |
| vm.id++; | |
| } else { | |
| return false; | |
| } | |
| } | |
| function prev() { | |
| if (vm.id == 1) { | |
| return false; | |
| } else { | |
| vm.id--; | |
| } | |
| } | |
| } | |
| })(); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script> |
| // General Variables | |
| $bg-color: #D8DBE2; | |
| $accent-color: #58A4B0; | |
| $primary-color: #373F51; | |
| $secondary-color: #FFF; | |
| $easing: cubic-bezier(0.680, -0.550, 0.265, 1.550) 1s 0s; | |
| // Card Variables | |
| $c-width: 30em; | |
| $c-height: $c-width - 10; | |
| $c-shadow: 10px 10px 20px darken($bg-color, 9%); | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; padding :0; | |
| font-family: 'Mallanna', sans-serif; | |
| } | |
| html { | |
| overflow: hidden; | |
| } | |
| body { | |
| background: $bg-color; | |
| transform:translate3d(0,0,0); | |
| } | |
| .container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-top: 2.5em; | |
| margin-left: 5em; | |
| height: 100vh; | |
| } | |
| .card { | |
| background: $secondary-color; | |
| width: $c-width; | |
| height: $c-height; | |
| position: relative; | |
| box-shadow: $c-shadow; | |
| &_controls { | |
| position: absolute; | |
| right: 0; | |
| i { | |
| background: $primary-color; | |
| color: #FFF; | |
| font-size: 2.4em; | |
| width: 2.09em; | |
| height: 2.05em; | |
| line-height: 2em; | |
| text-align: center; | |
| display: block; | |
| cursor: pointer; | |
| font-style: normal; | |
| } | |
| .rating { | |
| background: $accent-color; | |
| color: #FFF; | |
| font-size: 2.4em; | |
| width: 2.09em; | |
| height: 2.05em; | |
| line-height: 2em; | |
| overflow: hidden; | |
| position: absolute; | |
| text-align: center; | |
| cursor: pointer; | |
| font-style: normal; | |
| cursor: default; | |
| p { | |
| font-size: 0.7em; | |
| } | |
| } | |
| } | |
| &_sub_information { | |
| position: absolute; | |
| bottom: 0; | |
| height: 26.4%; | |
| width: 100%; | |
| padding: 1em; | |
| h1 { | |
| color: $primary-color; | |
| font-size: 1.2em; | |
| } | |
| p { | |
| margin: -0.8em 0; | |
| color: lighten($primary-color, 12%); | |
| } | |
| button { | |
| background: $accent-color; | |
| color: #FFF; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| font-size: 0.6em; | |
| border: none; | |
| padding: 1em 1.5em; | |
| cursor: pointer; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| margin: 2.5em 1.7em; | |
| outline: none; | |
| } | |
| } | |
| &_overlay { | |
| background-size: cover; | |
| position: absolute; | |
| width: $c-width; | |
| height: $c-height; | |
| transform: translateX($c-width / -6) translateY($c-height / -3.8); | |
| .img-container { | |
| display: inline-block; | |
| overflow: hidden; | |
| position: absolute; | |
| z-index: -1; | |
| height: $c-height; | |
| } | |
| img { | |
| display: block; | |
| width: 100%;; | |
| height: 100%; | |
| object-fit: cover; | |
| animation: zoom ease-in 20s forwards; | |
| } | |
| &__information { | |
| background: rgba(0, 0, 0, 0.5); | |
| height: 100%; | |
| padding: 1em; | |
| z-index: 1; | |
| h1, p, i, span { | |
| color: rgba(255, 255, 255, 1); | |
| } | |
| i { | |
| margin: 0.9em 0; | |
| border-radius: 100%; | |
| cursor: default; | |
| font-size: 1.4em; | |
| vertical-align: middle; | |
| } | |
| span { | |
| font-size: 0.9em; | |
| } | |
| } | |
| } | |
| } | |
| // Animations | |
| @keyframes rock { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 50% { | |
| transform: rotate(15deg); | |
| } | |
| 100% { | |
| transform: rotate(0deg); | |
| } | |
| } | |
| @keyframes zoom { | |
| from { | |
| transform: scale(1); | |
| } | |
| to { | |
| transform: scale(1.5); | |
| } | |
| } | |
| // Fade In | |
| .fade-in.ng-enter, .fade-in.ng-leave { | |
| transition: opacity $easing; | |
| } | |
| .fade-in.ng-enter, | |
| .fade-in.ng-leave.ng-leave-active { | |
| opacity: 0; | |
| } | |
| .fade-in.ng-leave, | |
| .fade-in.ng-enter.ng-enter-active { | |
| opacity: 1; | |
| } | |
| // Top To Bottom | |
| .top-to-bottom.ng-enter, .top-to-bottom.ng-leave { | |
| transition: all $easing; | |
| } | |
| .top-to-bottom.ng-enter, | |
| .top-to-bottom.ng-leave.ng-leave-active { | |
| opacity: 0; | |
| transform: translateY(1em); | |
| } | |
| .top-to-bottom.ng-leave, | |
| .top-to-bottom.ng-enter.ng-enter-active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } |
