Skip to content

Instantly share code, notes, and snippets.

@nbortolotti

nbortolotti/mdl_cards001_index.html

Last active December 27, 2015 19:21
Show Gist options
  • Save nbortolotti/7d971c45a01a5eb816dd to your computer and use it in GitHub Desktop.
Save nbortolotti/7d971c45a01a5eb816dd to your computer and use it in GitHub Desktop.
Download ZIP
Material Design Lite - Simple Card 001
Raw
mdl_cards001_index.html
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.demostracion-mdl-card {
width: 450px;
}
.demostracion-mdl-card > .mdl-card__title {
color: #fff;
height: 150px;
background: url('./imagenes/android_1.jpg') center / cover;
}
.demostracion-mdl-card > .mdl-card__menu {
color: #fff;
}
</style>
</head>
<body>
<div class="mdl-card mdl-shadow--2dp demostracion-mdl-card">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Contenido Móvil</h2>
</div>
<div class="mdl-card__supporting-text">
Contenido para iniciar el desarrollo móvil en aplicaciones nativas Android
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Ver
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment