Material Design Lite - Cards
home
Run
screen_rotation
fullscreen
cloud_download
navigate_next
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script> <style> .dummy-card-wide.mdl-card { width: 500px; } .dummy-card-wide > .mdl-card__title { color: #fff; height: 180px; background: url('http://tutorialsplane.com/wp-content/uploads/2016/04/bagan-701006_640.jpg') center / cover; } .dummy-card-wide > .mdl-card__menu { color: #fff; } </style> </head> <body> <div class="dummy-card-wide mdl-card mdl-shadow--2dp"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Tutorialsplane.com</h2> </div> <div class="mdl-card__supporting-text"> Learn Material Design.... </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> Learn More </a> </div> </div> </body> </html>
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script> <style> .dummy-card-wide.mdl-card { width: 500px; } .dummy-card-wide > .mdl-card__title { color: #fff; height: 180px; background: url('http://tutorialsplane.com/wp-content/uploads/2016/04/bagan-701006_640.jpg') center / cover; } .dummy-card-wide > .mdl-card__menu { color: #fff; } </style> </head> <body> <div class="dummy-card-wide mdl-card mdl-shadow--2dp"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Tutorialsplane.com</h2> </div> <div class="mdl-card__supporting-text"> Learn Material Design.... </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> Learn More </a> </div> </div> </body> </html>
Copyrights@tutorialsplane.com