momin-riyadh/Newsletter

## Newsletter
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sign Up Form</title>
	<style>

			.mn-form {
			  width: 450px;
			  margin: 17% auto;
			  background: green;
			  padding:15px;
			  border-radius: 2px;
			}


			.mn-header-text {
			  font-size: 35px;
			  text-transform: uppercase;
			  letter-spacing: 5px;
			  text-align: center;
			}


			.mn-description {
			  font-size: 14px;
			  letter-spacing: 1px;
			  line-height: 1.3em;
			  margin: -2px 0 45px;
			}


			.mn-input {
			  display: flex;
			  align-items: center;
			}


			.mn-button {
			  height: 44px;
			  border: none;
			}


			#email {
			  width: 75%;
			  background: #FDFCFB;
			  font-family: inherit;
			  color: #737373;
			  letter-spacing: 1px;
			  text-indent: 5%;
			  border-radius: 5px 0 0 5px;
			}


			#submit {
			  width: 25%;
			  height: 46px;
			  background: #E86C8D;
			  font-family: inherit;
			  font-weight: bold;
			  color: inherit;
			  letter-spacing: 1px;
			  border-radius: 0 5px 5px 0;
			  cursor: pointer;
			  transition: background .3s ease-in-out;
			}


			#submit:hover {
			  background: #d45d7d;
			}


			input:focus {
			  outline: none;
			  outline: 2px solid #E86C8D;
			  box-shadow: 0 0 2px #E86C8D;
			}
	</style>
</head>
<body>
    <form class ="mn-form" action="#" method="post" name="sign up for beta">
      <div class="mn-header-text">
         <p>Sign Up For Beta</p>
      </div>
      <div class="mn-description">
        <p>Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.</p>
      </div>
      <div class="mn-input">
        <input type="text" class="mn-button" id="email" name="email" placeholder="NAME@EXAMPLE.COM">
        <input type="submit" class="mn-button" id="submit" value="SIGN UP">
      </div>
    </form>
</body>
</html>