<section class="page-section">
		<div class="page-section-wrapper">
				<header class="page-section-header">
						<h1 class="page-section-header-title">Stay Tuned for Updates</h1></header>
				<div class="page-section-content">
						<form action="/" method="POST" class="material-form">
								<section class="material-form-field">
										<div class="material-form-field-controls">
												<div class="form-field-controls-group">
														<input type="email" id="email" required="required" placeholder="Email" title="Please enter Email" class="material-form-field-input">
													<label for="email" class="material-form-field-label">Email</label>
$materialInputPadding ?= 0.5em
$materialInputWidth ?= 25em
$materialInputFontSize ?= 1.5em
$materialInputColour ?= white

/* -- import Roboto Font -- */
@import url("//fonts.googleapis.com/css?family=Roboto400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic")

$fontFamily ?= "RobotoDraft", "Roboto", "Helvetica Neue, Helvetica, Arial", sans-serif
// the meat of CSS
			position relative
			max-width $materialInputWidth
			margin 0 auto
					font-family $fontFamily
					color transparent
				padding $materialInputPadding 0
				font-size $materialInputFontSize
				color inherit
				font-family inherit
				width 100%
				background transparent
				border-width 0 0 1px 0
				transition 0.4s ease border-color
					&:valid, &:invalid
						border-bottom-width 2px
						border-color green
						border-color red
				&:focus, &:not(:placeholder-shown), &[value], &:valid
						color transparent
					& + .material-form-field-label
						transform translateY(-1.1em)
				& + .material-form-field-label
					transition 0.4s ease all
					cursor pointer
					transform translateY(0)
					font-size $materialInputFontSize
					left 0
					top $materialInputPadding * 1.1
					position absolute
					color $materialInputColour
					outline none
		& + label
			position absolute
			left 0.5em
// strictly for the demo
	font-family $fontFamily
	background #3AADFF
	color white
		min-height 100vh
			width 100%
				font-size 2.5em
				margin-bottom 1em
				font-weight 300
			width 100%
			padding 10%
			box-sizing border-box
		display flex
		flex-wrap wrap
		align-items center
		text-align center
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.