SamEureka/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS / HTML Exercise - Login</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="background"></div>
  <div id="container">
      <div id="logo">
      <span class="fa-stack fa-5x">
        <i class="fa fa-circle lightGrey fa-stack-2x"></i>
        <i class="fa fa-check green fa-stack-1x"></i>
      </span>
    </div>
    <div id="userNameGroup">
      <div id="userNameIcon">
        <i class="fa fa-user fa-3x lightGrey"></i>
      </div>
      <div id="userName" contenteditable="true"></div>
    </div>
    <div id="passWordGroup">
      <div id="passWordIcon">
        <i class="fa fa-lock fa-3x lightGrey"></i>
      </div>
      <div id="passWord" contenteditable="true"></div>
    </div>
    <div id="resetPassword">
      <a href="#">Forgot Password?</a>
    </div>
    <div id="signIn">Sign In</div>
    <div id="signUp" class="lightGrey">Don't have an account?
      <a href="#">Sign up!</a>
    </div>
  </div>
</body>
</html>

## style.css
* {
  box-sizing: border-box;
}

body {
  background-color: #222;
  width: 375px;
}

.background {
  position: absolute;
  width: 375px;
  height: 667px;
  background-image: url(http://www.divergentmedia.com/blog/wp-content/uploads/2015/09/Yosemites-El-Capitan-Mountain-Wall-Wallpaper.jpg);
  background-size: cover;
  background-position: -0px -20px;
  -webkit-filter: saturate(5);
  filter: saturate(5);
  background-repeat: no-repeat;
  z-index: 1;
}

#container {
  position: relative;
  width: 375px;
  height: 647px;
  font-family: sans-serif;
  z-index: 2;
  /*background-color: rgba(255,0,0,0.5);*/
}

#logo {
  position: relative;
  left: 105px;
  top: 90px;
  height: 50%;
}

#userNameIcon {
  display: inline-block;
  width: 55px;
  height: 55px;
  padding-top: 5px;
  padding-left: 5px;
  border-bottom: 2px ridge rgba(204, 204, 204, 0.5);
}

#userName {
  display: inline-block;
  width: 315px;
  height: 50px;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 2em;
  border-bottom: 2px ridge rgba(204, 204, 204, 0.5);
}

#passWordIcon {
  display: inline-block;
  width: 55px;
  height: 55px;
  padding-top: 5px;
  padding-left: 7px;
  border-bottom: 2px ridge rgba(204, 204, 204, 0.5);
}

#passWord {
  display: inline-block;
  width: 313px;
  height: 50px;
  color: white;
  font-size: 2em;
  font-family: sans-serif;
  padding-top: 10px;
  border-bottom: 2px ridge rgba(204, 204, 204, 0.5);
  -webkit-text-security: disc;
}

#resetPassword {
  position: relative;
  top: 5px;
  right: 5px;
  color: rgba(204, 204, 204, 0.5);
  height: 80px;
  text-align: right;
}

#signIn {
  position: relative;
  top: 0px;
  height: 58px;
  padding-top: 22px;
  background-color: rgba(204, 204, 204, 0.5);
  text-align: center;
  font-size: 1em;
  color: white;
  cursor: pointer;
}

#signUp {
  position: relative;
  top: 27px;
  text-align: center;
}

.lightGrey {
  color: rgba(204, 204, 204, 0.8);
}

.medGrey {
  color: rgba(102, 102, 102, 0.8);
}

.darkGrey {
  color: rgba(51, 51, 51, 0.8);
}

.green {
  color: rgba(17, 132, 4, 0.8);
}

.red {
  color: rgba(244, 93, 0, 0.8);
}

textarea,
input,
div {
  outline: none;
}

a {
  color: white;
  text-decoration: none;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS / HTML Exercise - Login</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<div class="background"></div>
	<div id="container">
	<div id="logo">
	<span class="fa-stack fa-5x">
	<i class="fa fa-circle lightGrey fa-stack-2x"></i>
	<i class="fa fa-check green fa-stack-1x"></i>
	</span>
	</div>
	<div id="userNameGroup">
	<div id="userNameIcon">
	<i class="fa fa-user fa-3x lightGrey"></i>
	</div>
	<div id="userName" contenteditable="true"></div>
	</div>
	<div id="passWordGroup">
	<div id="passWordIcon">
	<i class="fa fa-lock fa-3x lightGrey"></i>
	</div>
	<div id="passWord" contenteditable="true"></div>
	</div>
	<div id="resetPassword">
	<a href="#">Forgot Password?</a>
	</div>
	<div id="signIn">Sign In</div>
	<div id="signUp" class="lightGrey">Don't have an account?
	<a href="#">Sign up!</a>
	</div>
	</div>
	</body>
	</html>
	* {
	box-sizing: border-box;
	}

	body {
	background-color: #222;
	width: 375px;
	}

	.background {
	position: absolute;
	width: 375px;
	height: 667px;
	background-image: url(http://www.divergentmedia.com/blog/wp-content/uploads/2015/09/Yosemites-El-Capitan-Mountain-Wall-Wallpaper.jpg);
	background-size: cover;
	background-position: -0px -20px;
	-webkit-filter: saturate(5);
	filter: saturate(5);
	background-repeat: no-repeat;
	z-index: 1;
	}

	#container {
	position: relative;
	width: 375px;
	height: 647px;
	font-family: sans-serif;
	z-index: 2;
	/background-color: rgba(255,0,0,0.5);/
	}

	#logo {
	position: relative;
	left: 105px;
	top: 90px;
	height: 50%;
	}

	#userNameIcon {
	display: inline-block;
	width: 55px;
	height: 55px;
	padding-top: 5px;
	padding-left: 5px;
	border-bottom: 2px ridge rgba(204, 204, 204, 0.5);
	}

	#userName {
	display: inline-block;
	width: 315px;
	height: 50px;
	color: white;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 2em;
	border-bottom: 2px ridge rgba(204, 204, 204, 0.5);
	}

	#passWordIcon {
	display: inline-block;
	width: 55px;
	height: 55px;
	padding-top: 5px;
	padding-left: 7px;
	border-bottom: 2px ridge rgba(204, 204, 204, 0.5);
	}

	#passWord {
	display: inline-block;
	width: 313px;
	height: 50px;
	color: white;
	font-size: 2em;
	font-family: sans-serif;
	padding-top: 10px;
	border-bottom: 2px ridge rgba(204, 204, 204, 0.5);
	-webkit-text-security: disc;
	}

	#resetPassword {
	position: relative;
	top: 5px;
	right: 5px;
	color: rgba(204, 204, 204, 0.5);
	height: 80px;
	text-align: right;
	}

	#signIn {
	position: relative;
	top: 0px;
	height: 58px;
	padding-top: 22px;
	background-color: rgba(204, 204, 204, 0.5);
	text-align: center;
	font-size: 1em;
	color: white;
	cursor: pointer;
	}

	#signUp {
	position: relative;
	top: 27px;
	text-align: center;
	}

	.lightGrey {
	color: rgba(204, 204, 204, 0.8);
	}

	.medGrey {
	color: rgba(102, 102, 102, 0.8);
	}

	.darkGrey {
	color: rgba(51, 51, 51, 0.8);
	}

	.green {
	color: rgba(17, 132, 4, 0.8);
	}

	.red {
	color: rgba(244, 93, 0, 0.8);
	}

	textarea,
	input,
	div {
	outline: none;
	}

	a {
	color: white;
	text-decoration: none;
	}