BrentonCozby/form.html

## form.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
            position: relative;
        }
        .contact {
            min-height: 100vh;
            padding: 10px;
            background-color: navy;
        }
        form {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            margin: 15px;
            max-width: 700px;
            background-color: lightblue;
            box-shadow: 0 15px 30px -10px rgba(0, 0, 0, .9);
            padding: 10px;
        }
        form input,
        form textarea,
        form button {
            padding: 8px;
            border-radius: 3px;
            display: block;
            width: 100%;
            border: 1px solid #aaa;
        }
        form textarea {
            height: 150px;
        }
        .form-input {
            padding: 20px 10px;
        }
        .split-2 {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: flex-start;
        }
        .split-box {
            width: 100%;
        }

        @media all and (min-width: 520px) {
            form {
                padding: 20px;
            }
            .split-box {
                width: 50%;
            }
        }
    </style>
</head>
<body>

    <section class="contact">
        <form>
            <div class="split-2">
                <div class="form-input split-box">
                    <label for="">First Name</label>
                    <input type="text">
                </div>
                <div class="form-input split-box">
                    <label for="">First Name</label>
                    <input type="text">
                </div>
            </div>

            <div class="split-2">
                <div class="form-input split-box">
                    <label for="">First Name</label>
                    <input type="text">
                </div>
                <div class="form-input split-box">
                    <label for="">First Name</label>
                    <input type="text">
                </div>
            </div>

            <div class="split-2">
                <div class="form-input split-box">
                    <label for="">First Name</label>
                    <input type="text">
                </div>
                <div class="form-input split-box">
                    <label for="">First Name</label>
                    <input type="text">
                </div>
            </div>

            <div class="form-input">
                <textarea name="message"></textarea>
            </div>

            <div class="form-input">
                <button type="submit">Send Message →</button>
            </div>
        </form>
    </section>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	* {
	box-sizing: border-box;
	position: relative;
	}
	.contact {
	min-height: 100vh;
	padding: 10px;
	background-color: navy;
	}
	form {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	margin: 15px;
	max-width: 700px;
	background-color: lightblue;
	box-shadow: 0 15px 30px -10px rgba(0, 0, 0, .9);
	padding: 10px;
	}
	form input,
	form textarea,
	form button {
	padding: 8px;
	border-radius: 3px;
	display: block;
	width: 100%;
	border: 1px solid #aaa;
	}
	form textarea {
	height: 150px;
	}
	.form-input {
	padding: 20px 10px;
	}
	.split-2 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
	}
	.split-box {
	width: 100%;
	}

	@media all and (min-width: 520px) {
	form {
	padding: 20px;
	}
	.split-box {
	width: 50%;
	}
	}
	</style>
	</head>
	<body>

	<section class="contact">
	<form>
	<div class="split-2">
	<div class="form-input split-box">
	<label for="">First Name</label>
	<input type="text">
	</div>
	<div class="form-input split-box">
	<label for="">First Name</label>
	<input type="text">
	</div>
	</div>

	<div class="split-2">
	<div class="form-input split-box">
	<label for="">First Name</label>
	<input type="text">
	</div>
	<div class="form-input split-box">
	<label for="">First Name</label>
	<input type="text">
	</div>
	</div>

	<div class="split-2">
	<div class="form-input split-box">
	<label for="">First Name</label>
	<input type="text">
	</div>
	<div class="form-input split-box">
	<label for="">First Name</label>
	<input type="text">
	</div>
	</div>

	<div class="form-input">
	<textarea name="message"></textarea>
	</div>

	<div class="form-input">
	<button type="submit">Send Message →</button>
	</div>
	</form>
	</section>

	</body>
	</html>