A Pen by Sagrika Rastogi

Thumbnail
This awesome code was written by Sagrika_Rastogi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Sagrika_Rastogi ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Sagrika Rastogi</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  
  <link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.5/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.5/docs.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class = "fnav">
    
        <md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop="" md-whiteframe="4">

      <md-toolbar class="md-theme-indigo">
        
        <h1 class="md-toolbar-tools">TODO List</h1>
      </md-toolbar>

      <md-content layout-margin="">
        
        
        
        
        <md-list class="listdemoListControls">

 
  <md-list-item class="secondary-button-padding" ng-click="cardAction($event, $index)">
      Category 1
  </md-list-item>
          <br>

  <md-divider></md-divider>    
  <md-list-item class="secondary-button-padding" ng-click="cardAction($event, $index)">
      Category 2
  </md-list-item>
<br>
  <md-divider></md-divider>   
      
  <md-list-item class="secondary-button-padding" ng-click="cardAction($event, $index)">
      Category 3
  </md-list-item>
       
      
         
          <br>

  <md-divider></md-divider>
          
  <md-list-item class="secondary-button-padding" ng-click="cardRAction($event, $index)">
      Clear
  </md-list-item>

  
</md-list>

      </md-content>

    </md-sidenav>
    
    
  </div>
  <div class = "fnotes"></div>
  
  
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.5/angular-material.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Sagrika_Rastogi/a-pen-by-sagrika-rastogi-opdzgX */
.container {
  display: flex; /* or inline-flex */
  flex-direction: row;
}

.fnav {
  display: flex; /* or inline-flex */
  flex-direction: column;
}

.fnotes {
  display: flex; /* or inline-flex */
  flex-direction: row wrap;
}

Comments