itainoam/basic_form.html

## basic_form.html
<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8' />
    <title>Page title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            color: #5D6063;
            background-color: #EAEDF0;
            font-family: "Helvetica",
            "Arial", sans-serif;
            font-size: 16px;
            line-height: 1.3p;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .app-form-header {
            text-align: center;
            background-color: #F6F7F8;
            border: 1px solid #D6D9DC;
            border-radius: 3px;
            width: 80%;
            margin: 40px 0;
            padding: 50px;
        }

        .app-form-header h1 {
            font-size: 30px;
            margin-bottom: 20px;
        }

        .app-form {
            background-color: #F6F7F8;
            border: 1px solid #D6D9DC;
            border-radius: 3px;
            width: 80%;
            padding: 50px;
            margin: 0 0 40px 0;
        }

        .form-row {
            margin-bottom: 40px;
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            flex-wrap: wrap;
        }

        .form-row input[type='text'] {
            background-color: #FFFFFF;
            border: 1px solid #D6D9DC;
            border-radius: 3px;
            width: 100%;
            padding: 7px;
            font-size: 14px;
        }

        .form-row label {
            margin-bottom: 15px;
        }

        .form-row select {
            width: 100%;
            font-size: 16px;
            background-color: white;
        }

        .form-row button {
            font-size: 16px;
            font-weight: bold;
            color: #FFFFFF;
            background-color: #5995DA;
            border: none;
            border-radius: 3px;
            padding: 10px 40px;
            cursor: pointer;
        }

        .form-row button:hover {
            background-color: #76AEED;
        }

        .form-row button:active {
            background-color: #407FC7;
        }

        @media only screen and (min-width: 700px) {
            .app-form-header,
            .app-form {
                width: 600px;
            }
        }
    </style>
</head>

<body>
    <header class='app-form-header'>
        <h1>Main title</h1>
        <p>
            <em>Subitle asdf asdf asd fa sdf</em>
        </p>
    </header>
    <form  class='app-form'>
        <div class='form-row'>
            <label for='full-name'>Name</label>
            <input id='full-name' name='full-name' type='text' />
        </div>
        <div class='form-row'>
            <label for='t-shirt'>Options</label>
            <select id='t-shirt' name='t-shirt'>
                <option value='xs'>Extra Small</option>
                <option value='s'>Small</option>
                <option value='m'>Medium</option>
                <option value='l'>Large</option>
            </select>
        </div>
        <div class='form-row'>
            <button>Submit</button>
        </div>
    </form>
</body>

</html>
	<!DOCTYPE html>
	<html lang='en'>

	<head>
	<meta charset='UTF-8' />
	<title>Page title</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	color: #5D6063;
	background-color: #EAEDF0;
	font-family: "Helvetica",
	"Arial", sans-serif;
	font-size: 16px;
	line-height: 1.3p;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	.app-form-header {
	text-align: center;
	background-color: #F6F7F8;
	border: 1px solid #D6D9DC;
	border-radius: 3px;
	width: 80%;
	margin: 40px 0;
	padding: 50px;
	}

	.app-form-header h1 {
	font-size: 30px;
	margin-bottom: 20px;
	}

	.app-form {
	background-color: #F6F7F8;
	border: 1px solid #D6D9DC;
	border-radius: 3px;
	width: 80%;
	padding: 50px;
	margin: 0 0 40px 0;
	}

	.form-row {
	margin-bottom: 40px;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	flex-wrap: wrap;
	}

	.form-row input[type='text'] {
	background-color: #FFFFFF;
	border: 1px solid #D6D9DC;
	border-radius: 3px;
	width: 100%;
	padding: 7px;
	font-size: 14px;
	}

	.form-row label {
	margin-bottom: 15px;
	}

	.form-row select {
	width: 100%;
	font-size: 16px;
	background-color: white;
	}

	.form-row button {
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #5995DA;
	border: none;
	border-radius: 3px;
	padding: 10px 40px;
	cursor: pointer;
	}

	.form-row button:hover {
	background-color: #76AEED;
	}

	.form-row button:active {
	background-color: #407FC7;
	}

	@media only screen and (min-width: 700px) {
	.app-form-header,
	.app-form {
	width: 600px;
	}
	}
	</style>
	</head>

	<body>
	<header class='app-form-header'>
	<h1>Main title</h1>
	<p>
	<em>Subitle asdf asdf asd fa sdf</em>
	</p>
	</header>
	<form class='app-form'>
	<div class='form-row'>
	<label for='full-name'>Name</label>
	<input id='full-name' name='full-name' type='text' />
	</div>
	<div class='form-row'>
	<label for='t-shirt'>Options</label>
	<select id='t-shirt' name='t-shirt'>
	<option value='xs'>Extra Small</option>
	<option value='s'>Small</option>
	<option value='m'>Medium</option>
	<option value='l'>Large</option>
	</select>
	</div>
	<div class='form-row'>
	<button>Submit</button>
	</div>
	</form>
	</body>

	</html>