<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   body {
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

.theme {
  padding:32px 0 32px 0;
}

.working-area {
  width: 370px;
  height: 770px;
  margin: 0 auto;
  background-color: rgba(142,36,170,0.3);
  padding: 16px;
  border-radius: 8px;
}

.poster {
  width: 80px;
  height: 110px; 
  padding: 5px;
}

#footer .footer_image {
  height: 24px;
  width:24px;
  text-align: center;
  padding: 4px;
}
#footer .footer_image:hover{
  background-color: lightskyblue;
}
  </style>
 </head>
 <body translate="no">
  <html lang="en">
   <head>
   </head>
   <body ng-app="MyApp">
    <div class="theme" layout="row" layout-align="center center">
     Day 25: TV App
    </div>
    <div class="working-area" ng-controller="AppCtrl">
     <div flex="" flex-gt-sm="100">
      <md-toolbar class="md-hue-3" layout="row">
       <div class="md-toolbar-tools">
        <span>
         Movies
        </span>
       </div>
      </md-toolbar>
      <md-content>
       <md-list flex="">
        <md-list-item class="md-3-line" ng-click="null" ng-repeat="item in todos">
         <img alt="{{item.who}}" class="poster" ng-src="{{item.cover}}?{{$index}}"/>
         <div class="md-list-item-text" layout="column">
          <h3>
           <b>
            {{ item.who }}
           </b>
           | {{item.duration}}
          </h3>
          <h4>
           {{ item.what }}
          </h4>
          <p>
           {{item.rank}}
          </p>
         </div>
        </md-list-item>
       </md-list>
      </md-content>
     </div>
    </div>
    <div class="background-color-green" layout="row" layout-align="center center">
     <h3>
      Youtube tutorial
      <a href="https://youtu.be/BEwHrFPikEM" target="_blank">
       here!
      </a>
     </h3>
    </div>
    <br/>
    <div class="background-color-green" layout="row" layout-align="center center">
     Created by Eleftheria
    </div>
    <div class="background-color-green" id="footer" layout="row" layout-align="center center">
     <a href="https://www.linkedin.com/in/eleftheriabatsou/" target="_blank">
      <img alt="linkedin" class="footer_image" src="https://image.flaticon.com/icons/svg/39/39714.svg" title="linkedin"/>
     </a>
     ~
     <a href="https://codepen.io/EleftheriaBatsou" target="_blank">
      <img alt="codepen" class="footer_image" src="https://image.flaticon.com/icons/svg/51/51767.svg" title="codepen"/>
     </a>
     ~
     <a href="https://www.youtube.com/c/EleftheriaBatsou" target="_blank">
      <img alt="youtube" class="footer_image" src="https://image.flaticon.com/icons/svg/733/733646.svg" title="youtube"/>
     </a>
     ~
     <a href="https://twitter.com/BatsouElef" target="_blank">
      <img alt="twitter" class="footer_image" src="https://image.flaticon.com/icons/svg/8/8800.svg" title="twitter"/>
     </a>
     ~
     <a href="https://github.com/EleftheriaBatsou" target="_blank">
      <img alt="github" class="footer_image" src="https://image.flaticon.com/icons/svg/25/25231.svg" title="github"/>
     </a>
     ~
     <a href="https://www.instagram.com/eleftheriabatsou/" target="_blank">
      <img alt="instagram" class="footer_image" src="https://image.flaticon.com/icons/svg/69/69366.svg" title="instagram"/>
     </a>
     ~
     <a href="http://www.eleftheriabatsou.com" target="_blank">
      <img alt="website" class="footer_image" src="https://image.flaticon.com/icons/svg/484/484101.svg" title="website"/>
     </a>
    </div>
   </body>
  </html>
 </body>
</html>
