Untitled

<!doctype html>

<html>
	<head>
		<title>Material Example</title>
		<style type='text/css'>
			body,html{
				padding:0;
				margin:0;
				background:url('noise.png');
				font-family: Helvetica, Arial, sans-serif;
				font-size: 16px;
				font-style: normal;
				font-weight: bold;
				text-transform: normal;
				letter-spacing: normal;
				line-height: 1.4em;
			}
			#wrapper {
				width: 80%;
				max-width: 500px;
				margin:0 auto;
			}
			.card {
				margin-top:1em;
				border-radius:5px;
				color:#444;
				background:white;
				border:1px solid #ccc;
				box-shadow: #bbb 0 2px 5px;
			}
			.header {
				background:#29b6f6;
				color:#e1f5fe;
				font-weight:bold;
				padding:.1em .5em;
				border-radius:3px 3px 0 0;
			}
			.content {
				padding:1em .5em;
			}
			.footer {
				color:#444;
				padding:1em .5em;
				border-radius:0 0 3px 3px;
				display: flex;
				align-items:stretch;
				align-content:stretch;
			}
			.footer > * {
				flex-grow:1;
			}
			.select-response {
				position: relative;
			}
			.select-response:after {
				content: "Multi-choice";
			}
			.select-response items {
				background: #e1f5fe;
				position: absolute;
				top:0;
				left:0;
				right:0;
				width:100%;
				padding:0 0;
				max-height: 0;
				overflow: hidden;
				-webkit-transition: all 500ms ease-out;
				-moz-transition: all 500ms ease-out;
				-ms-transition: all 500ms ease-out;
				-o-transition: all 500ms ease-out;
				transition: all 500ms ease-out;
				box-shadow:#AAA 0 0 4px;
			}
			.select-response:hover items {
				max-height:99em;
				padding:.25em 0;
				color:#01579b;
			}
			.select-response items item {
				display: block;
				padding:.1em .5em;
			}
			.select-response items item:hover {
				background:#29b6f6;
				color:#e1f5fe;
			}
			.text-response {
				text-align: right;
				padding:1.75em .25em .25em .25em;
			}
			.text-response input[type='text'] {
				border:none;
				border-bottom:1px solid #455a64;
				background:transparent;
				-webkit-font-smoothing: antialiased;
				outline:none;
				width:100%;
				padding:5px 0 9px 0;
				font-family: Helvetica, Arial, sans-serif;
				font-size: 14px;
				font-style: normal;
				font-weight: normal;
				text-transform: uppercase;
				letter-spacing: normal;
				line-height: 1.5em;
			}
			.action, .response {
				padding:1em .5em;
				text-align: center;
				position: relative;
				font-weight: bold;
			}
			.action .icon {
				max-width:0;
				padding:0;
				overflow:hidden;
				height:100%;
				-webkit-transition: all 500ms ease-out;
				-moz-transition: all 500ms ease-out;
				-ms-transition: all 500ms ease-out;
				-o-transition: all 500ms ease-out;
				transition: all 500ms ease-out;
				position: absolute;
				top:0;
				left:0;
				bottom:0;
				display: inline-block;
			}
			.action:hover .icon {
				max-width: 99em;
				padding:0 1em;
			}
			.response {
				color:#e1f5fe;
				background: #29b6f6;
			}
			.action-accept {
				background:#2baf2b;
				color:#f1f8e9;
			}
		</style>
	</head>
	<body>
		<div id='wrapper'>
			<div class='card'>
				<div class='header'>Sample Question <span>1</span></div>
				<div class='content'>
					But do you know the <strong>Muffin Man</strong>?
				</div>
				<div class='footer'>
					<div class='select-response response'>
						<items>
							<item>A</item>
							<item>B</item>
							<item>C</item>
							<item>D</item>
						</items>
					</div>
					<div class='action action-accept'>
						<img class='icon' src='checkmark.png' />Accept
					</div>
				</div>
			</div>
			<div class='card'>
				<div class='header'>
					Inline Text Response
				</div>
				<div class='content'>
					What's your favorite color?
				</div>
				<div class='footer'>
					<div class='text-response response'>
						<input type='text' />
					</div>
					<div class='action action-accept'>
						<img class='icon' src='checkmark.png' />Accept
					</div>
				</div>
			</div>
		</div>
	</body>
</html>