HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"
media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="background-image: url(https://i.imgur.com/BxFEOQ0.jpg); background-repeat: no-repeat; background-size: cover;">
<div class="row">
<div class="col l6 offset-l3 s12 m10 offset-m1" >
<div class="card z-depth-3" style="background-color:rgba(0, 0, 0, 0); margin-top: 15%;">
<div class="card-action">
<h3 class="center white-text">
Login Form
</h3>
</div>
<div class="card-content">
<form action="" method="GET">
<div class="input-field">
<i class="material-icons prefix ">person</i>
<input type="text" name="username" id="username">
<label for="username">Username</label>
</div>
<div class="input-field">
<i class="material-icons prefix">lock</i>
<input type="password" name="password" id="password">
<label for="password">Password</label>
</div>
<input type="checkbox" name="" id="checkbox">
<label for="checkbox">Remember Me</label>
<div class="center">
<input type="submit" name="" id="" value="Login" class="btn btn-large transparent red-text">
</div>
</form>
</div>
</div>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">
</script>
</body>
</html>
