Angular Material Card
home
Run
screen_rotation
fullscreen
cloud_download
<html lang="en" > <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <script type="text/javascript"> angular.module('myApp', ['ngMaterial']) .controller('myCtr', function($scope) { //other stuffs here ... }); </script> </head> <body ng-app="myApp" ng-cloak> <div ng-ctr="myCtr"> <md-content> <section layout="row" layout-sm="column" layout-align="center center" layout-wrap> <md-card> <img src="http://tutorialsplane.com/wp-content/uploads/2016/09/education-548105_960_720.jpg" style="height:200px;width:200px" class="md-card-image" alt="image caption"> <md-card-content> <h2>Tutorialsplane.com</h2> <p>The Simpleast way to learn everything.</p> </md-card-content> <md-card-footer> visit : www.tutorialsplane.com </md-card-footer> </md-card> </section> </md-content> </div> </div> </body> </html>
<html lang="en" > <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <script type="text/javascript"> angular.module('myApp', ['ngMaterial']) .controller('myCtr', function($scope) { //other stuffs here ... }); </script> </head> <body ng-app="myApp" ng-cloak> <div ng-ctr="myCtr"> <md-content> <section layout="row" layout-sm="column" layout-align="center center" layout-wrap> <md-card> <img src="http://tutorialsplane.com/wp-content/uploads/2016/09/education-548105_960_720.jpg" style="height:200px;width:200px" class="md-card-image" alt="image caption"> <md-card-content> <h2>Tutorialsplane.com</h2> <p>The Simpleast way to learn everything.</p> </md-card-content> <md-card-footer> visit : www.tutorialsplane.com </md-card-footer> </md-card> </section> </md-content> </div> </div> </body> </html>
Copyrights@tutorialsplane.com