mirror of
https://github.com/oopuuu/zTC1.git
synced 2025-12-12 21:18:13 +08:00
56 lines
1.6 KiB
HTML
56 lines
1.6 KiB
HTML
<html class="mdl-js"><head>
|
|
<title>Pure Test</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
|
|
<script defer="" src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Event card -->
|
|
<style>
|
|
.demo-card-event.mdl-card {
|
|
width: 256px;
|
|
height: 256px;
|
|
background: #3E4EB8;
|
|
}
|
|
.demo-card-event > .mdl-card__actions {
|
|
/*border-color: rgba(255, 255, 255, 0.2);*/
|
|
}
|
|
.demo-card-event > .mdl-card__title {
|
|
/*align-items: flex-start;*/
|
|
}
|
|
.demo-card-event > .mdl-card__title > h4 {
|
|
/*margin-top: 0;*/
|
|
}
|
|
.demo-card-event > .mdl-card__actions {
|
|
display: flex;
|
|
/*box-sizing:border-box;*/
|
|
align-items: center;
|
|
}
|
|
.demo-card-event > .mdl-card__actions > .material-icons {
|
|
padding-right: 10px;
|
|
}
|
|
.demo-card-event > .mdl-card__title,
|
|
.demo-card-event > .mdl-card__actions,
|
|
.demo-card-event > .mdl-card__actions > .mdl-button {
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|
|
<div class="demo-card-event mdl-card mdl-shadow--2dp">
|
|
<div class="mdl-card__title mdl-card--expand">
|
|
<h4>
|
|
Featured event:<br>
|
|
May 24, 2016<br>
|
|
7-11pm
|
|
</h4>
|
|
</div>
|
|
<div class="mdl-card__actions mdl-card--border">
|
|
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-upgraded=",MaterialButton,MaterialRipple">
|
|
Add to Calendar
|
|
<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></a>
|
|
<div class="mdl-layout-spacer"></div>
|
|
<i class="material-icons">event</i>
|
|
</div>
|
|
</div>
|
|
|
|
</body></html> |