Skip to content

Instantly share code, notes, and snippets.

@prashantdawar

prashantdawar/index.html

Last active January 19, 2018 06:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save prashantdawar/cbb29ad28d95f4bd7400def42413377a to your computer and use it in GitHub Desktop.
Save prashantdawar/cbb29ad28d95f4bd7400def42413377a to your computer and use it in GitHub Desktop.
Download ZIP
Material Design Profile Card
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vechile Profile</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script>
<style>/* ============/For vehicle profile card */
.card__v-profile > .mdl-card__actions{
position: relative;
height: 37px;
}
.card__v-profile > .mdl-card__actions > .mdl-button{
position: absolute;
right: 33px;
top: -21px;
width: 301px;
}
.card__v-profile{
width: 349px;
}
/* For vehicle profile card/============= */
</style>
</head>
<body>
<!-- ===============================/Vechile Profile Card========================================================== -->
<div class="mdl-card mdl-shadow--2dp card__v-profile">
<div class="mdl-card__title">
<h4 class="mdl-card__title-text">Vehicle Profile</h4>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="v-model" pattern="[A-Z,a-z,0-9, ]*">
<label class="mdl-textfield__label" for="v-model">Model Name</label>
<span class="mdl-textfield__error">Letters, numbers and spaces only</span>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="v-type" pattern="[A-Z,a-z, ]*">
<label class="mdl-textfield__label" for="v-type">Type</label>
<span class="mdl-textfield__error">Letters and spaces only</span>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="v-manufacturer" pattern="[A-Z,a-z, ]*">
<label class="mdl-textfield__label" for="v-manufacturer">Manufacturer</label>
<span class="mdl-textfield__error">Letters and spaces only</span>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="v-capactiy" pattern="[1-7]*">
<label class="mdl-textfield__label" for="v-capacity">Seating Capacity (1-7)</label>
<span class="mdl-textfield__error">1 to 7 persons only </span>
</div>
</div>
<div class="mdl-card__actions">
<button id="v-profile-save" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-shadow--2dp">Save</button>
</div>
</div>
<!-- ===============================Vechile Profile Card/========================================================== -->
</body>
</html>
Raw
material-design-profile-card.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment