matgargano/index.html

## index.html
<!doctype html>
<html lang="en">

<head>
    <link href="css/style.css" rel="stylesheet">
    <title>Webpage</title>
</head>

<body>
    <h1 class="text-center">Sign up</h1>
    <div class="form-container padding-15">
        <h2 class="underline text-center">Personal Information</h2>
        <form>
            <p><label class="block width-200" for="salutation">
                    Salutation*
                </label>
                <select class="width-100 special-input" required id="salutation" name="salutation">
                    <option value="">-</option>
                    <option value="ms">Ms.</option>
                    <option value="mr">Mr.</option>
                </select>
            </p>
            <p>
                <label class="block width-200" for="name">Name *</label>
                <input type="text" id="name" required class="special-input width-200" name="user-name" value="Mat" />
            </p>
            <p>
                <label class="block width-200" for="email">Email *</label>
                <input type="email" class="special-input width-200" id="email" required name="email-address"
                    placeholder="your email address" />
            </p>
            <p>
                <label class="block width-200" for="password">Password*</label>
                <input class="special-input width-200" type="password" required minlength="8" name="password" id="password" />
            </p>
            <h2 class="underline text-center">Misc. Information</h2>
            <p class="text-center">
                <label for="biography">Biography</label>
            </p>

            <p class="text-center">
                <textarea class="width-400 height-200 padding-15" name="biography" id="biography"></textarea>
            </p>
            <p class="text-center"><input type="submit" class="submit-button" value="Submit Form"></p>

        </form>

    </div>

</body>


</html>

## style.css
body {
  background-image: url(https://csc225.matgargano.com/app/uploads/2018/09/background-2462431_1920.jpg);
}
.form-container {
  background-color: #ffffff;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.padding-15 {
  padding: 15px;
}

.text-center {
  text-align: center;
}

.width-200 {
  width: 200px;
}

.block {
  display: inline-block;
}

.underline {
  text-decoration: underline;
}

.width-100 {
  width: 100px;
}

.width-400 {
  width: 400px;
}

.height-200 {
  height: 200px;
}

.submit-button {
  background: #000;
  color: #fff;
  padding: 10px 20px;
}

.special-input {
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom: 1px solid #ccc;
  outline: none;
}
.special-input:focus,
.special-input:hover {
  border-bottom-color: #333;
}

textarea {
  border: 1px solid #ccc;
}

textarea:focus,
textarea:hover {
  border: 1px solid #333;
}
	<!doctype html>
	<html lang="en">

	<head>
	<link href="css/style.css" rel="stylesheet">
	<title>Webpage</title>
	</head>

	<body>
	<h1 class="text-center">Sign up</h1>
	<div class="form-container padding-15">
	<h2 class="underline text-center">Personal Information</h2>
	<form>
	<p><label class="block width-200" for="salutation">
	Salutation*
	</label>
	<select class="width-100 special-input" required id="salutation" name="salutation">
	<option value="">-</option>
	<option value="ms">Ms.</option>
	<option value="mr">Mr.</option>
	</select>
	</p>
	<p>
	<label class="block width-200" for="name">Name *</label>
	<input type="text" id="name" required class="special-input width-200" name="user-name" value="Mat" />
	</p>
	<p>
	<label class="block width-200" for="email">Email *</label>
	<input type="email" class="special-input width-200" id="email" required name="email-address"
	placeholder="your email address" />
	</p>
	<p>
	<label class="block width-200" for="password">Password*</label>
	<input class="special-input width-200" type="password" required minlength="8" name="password" id="password" />
	</p>
	<h2 class="underline text-center">Misc. Information</h2>
	<p class="text-center">
	<label for="biography">Biography</label>
	</p>

	<p class="text-center">
	<textarea class="width-400 height-200 padding-15" name="biography" id="biography"></textarea>
	</p>
	<p class="text-center"><input type="submit" class="submit-button" value="Submit Form"></p>

	</form>

	</div>

	</body>


	</html>
	body {
	background-image: url(https://csc225.matgargano.com/app/uploads/2018/09/background-2462431_1920.jpg);
	}
	.form-container {
	background-color: #ffffff;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	}

	.padding-15 {
	padding: 15px;
	}

	.text-center {
	text-align: center;
	}

	.width-200 {
	width: 200px;
	}

	.block {
	display: inline-block;
	}

	.underline {
	text-decoration: underline;
	}

	.width-100 {
	width: 100px;
	}

	.width-400 {
	width: 400px;
	}

	.height-200 {
	height: 200px;
	}

	.submit-button {
	background: #000;
	color: #fff;
	padding: 10px 20px;
	}

	.special-input {
	border-top-width: 0;
	border-left-width: 0;
	border-right-width: 0;
	border-bottom: 1px solid #ccc;
	outline: none;
	}
	.special-input:focus,
	.special-input:hover {
	border-bottom-color: #333;
	}

	textarea {
	border: 1px solid #ccc;
	}

	textarea:focus,
	textarea:hover {
	border: 1px solid #333;
	}