<!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: 90%;
  height: 80%;
  margin: 0 auto;
  background-color: rgba(142,36,170,0.3);
  padding: 16px;
  border-radius: 8px;
}

.card-media img{
  max-width: 250px !important;
  max-height: 250px !important;
}
.submitButton{
  background-color: #a8edea !important;
}

#footer .footer_image {
  height: 24px;
  width:24px;
  text-align: center;
  padding: 4px;
}
  </style>
 </head>
 <body translate="no">
  <html lang="en">
   <head>
   </head>
   <body ng-app="MyApp">
    <div class="theme" layout="row" layout-align="center center">
     Day 18: Analytics Chart
    </div>
    <div class="working-area">
     <md-content class="md-padding" layout="row" layout-xs="column">
      <div flex-gt-xs="50" flex-xs="" layout="column">
       <md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch="">
        <md-card-title>
         <md-card-title-text>
          <span class="md-headline">
           Analysis
          </span>
          <span class="md-subhead">
           Calorie intake
          </span>
          <span>
           <p>
            This is your calorie intake info. You can add or delete with these 2 buttons.
           </p>
          </span>
         </md-card-title-text>
         <md-card-title-media>
          <div class="md-media-lg card-media">
           <img src="https://lh3.googleusercontent.com/g0Jw-I6-gH2DVCpnl3u8QKZVT_meR9lcJlpyeSZ-MyvwLnyEZvgyrY5frldA8HCv55s=w280-rwa"/>
          </div>
         </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
         <md-button>
          Add
         </md-button>
         <md-button>
          Delete
         </md-button>
        </md-card-actions>
       </md-card>
       <md-card md-theme="{{ showDarkTheme ? 'dark-orange' : 'default' }}" md-theme-watch="">
        <md-card-title>
         <md-card-title-text>
          <span class="md-headline">
           Progress
          </span>
          <span class="md-subhead">
           Calorie intake
          </span>
         </md-card-title-text>
        </md-card-title>
        <md-card-content layout="row" layout-align="space-between">
         <div class="md-media-xl card-media">
          <img src="https://i.stack.imgur.com/e2kSK.png"/>
         </div>
         <md-card-actions layout="column">
          <md-button aria-label="Favorite" class="md-icon-button">
           <md-icon md-svg-icon="img/icons/favorite.svg">
           </md-icon>
          </md-button>
          <md-button aria-label="Settings" class="md-icon-button">
           <md-icon md-svg-icon="img/icons/menu.svg">
           </md-icon>
          </md-button>
          <md-button aria-label="Share" class="md-icon-button">
           <md-icon md-svg-icon="img/icons/baseline-share-24px.svg">
           </md-icon>
          </md-button>
         </md-card-actions>
        </md-card-content>
       </md-card>
      </div>
      <div flex-gt-xs="50" flex-xs="" layout="column">
       <md-card md-theme="{{ showDarkTheme ? 'dark-purple' : 'default' }}" md-theme-watch="">
        <md-card-title>
         <md-card-title-text>
          <span class="md-headline">
           Water Intake
          </span>
          <span class="md-subhead">
           in Litre
          </span>
         </md-card-title-text>
         <md-card-title-media>
          <md-card-title-media>
           <div class="md-media-xl card-media">
            <img src="https://cdn3.iconfinder.com/data/icons/infographic-bar/512/9-512.png"/>
           </div>
          </md-card-title-media>
         </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
         <md-button>
          Add
         </md-button>
         <md-button>
          Delete
         </md-button>
        </md-card-actions>
       </md-card>
       <md-card md-theme="{{ showDarkTheme ? 'dark-blue' : 'default' }}" md-theme-watch="">
        <md-card-title>
         <md-card-title-text>
          <span class="md-headline">
           Vitamin Intake
          </span>
          <span class="md-subhead">
           A, B, C, D, E
          </span>
         </md-card-title-text>
         <md-card-title-media>
          <div class="md-media-xl card-media">
           <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5-tw9awBonb0JCixNoeLEvdEdbqTZ3aKAMp8p6QltfQ980W8Vrg"/>
          </div>
         </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
         <md-button>
          Info about the vitamins
         </md-button>
        </md-card-actions>
       </md-card>
       <div layout="row" layout-align="start end" style="height:40px">
        <md-checkbox ng-model="showDarkTheme">
         Use 'Dark' Themed Cards
        </md-checkbox>
       </div>
      </div>
     </md-content>
    </div>
    <div class="background-color-green" layout="row" layout-align="center center">
     <h3>
      Youtube tutorial
      <a href="https://youtu.be/zStigHTsuqQ" 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>
