1499215/HW1_M3C0UBGRN6.HTML

## HW1_M3C0UBGRN6.HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: roboto, Arial;}

.container {
background-color: #f3f3f3;
padding: 24px;
margin: 10px 10px 10px 10px;
border-radius: 5px;

}

.FirstName, .LastName {
 width: 100%;
  padding: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 8px 16px;
}


.country{
 width: 100%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 8px 16px;
}

button {
background-color: #4CAF50;
color:#ffffff;
border-radius: 4px;
margin:6px;
padding:12px;
border: none;
font-size: 20px;
hover-button:#f4f4f4;
box-sizing: border-box
}

.subject {
   width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 8px 16px;
}


.br {
padding :12px;
}

label {
font-size: 18px;
font-style: strong;
}

</style>
</head>
<body>

<h2>Contact Form by Napari</h2>

<div class="container">

     <div class ="br">
      <label for="firstname">First Name</label>
      <input type="text" class= "FirstName" id="fname" name="firstname" placeholder="Your name..">
      </div>

   <div class ="br">
    <label for="lastname">Last Name</label>
      <input type="text" class= "FirstName" id="fname" name="firstname" placeholder="Your name..">
   </div>


    <div class ="br">
     <label for= "country">Country</labe>
     <select id="country" class= "country" name="country">
      <option value="australia">Australia</option>
      <option value="Ghana">Ghana</option>
      <option value="Togo">Togo</option>
     </select>
     </div>


    <div class ="br">
     <label for="subject">Subject</label>
      <textarea id="subject" input type="text" class = "subject"  placeholder="Write something..." style= "height: 200px"></textarea>

    <dive class = "button">
     <button type="button" name="Submit"> Submit </button>
    </div>
   </div>

 </div>
</div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {font-family: roboto, Arial;}

	.container {
	background-color: #f3f3f3;
	padding: 24px;
	margin: 10px 10px 10px 10px;
	border-radius: 5px;

	}

	.FirstName, .LastName {
	width: 100%;
	padding: 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin: 8px 16px;
	}


	.country{
	width: 100%;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin: 8px 16px;
	}

	button {
	background-color: #4CAF50;
	color:#ffffff;
	border-radius: 4px;
	margin:6px;
	padding:12px;
	border: none;
	font-size: 20px;
	hover-button:#f4f4f4;
	box-sizing: border-box
	}

	.subject {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin: 8px 16px;
	}


	.br {
	padding :12px;
	}

	label {
	font-size: 18px;
	font-style: strong;
	}

	</style>
	</head>
	<body>

	<h2>Contact Form by Napari</h2>

	<div class="container">

	<div class ="br">
	<label for="firstname">First Name</label>
	<input type="text" class= "FirstName" id="fname" name="firstname" placeholder="Your name..">
	</div>

	<div class ="br">
	<label for="lastname">Last Name</label>
	<input type="text" class= "FirstName" id="fname" name="firstname" placeholder="Your name..">
	</div>


	<div class ="br">
	<label for= "country">Country</labe>
	<select id="country" class= "country" name="country">
	<option value="australia">Australia</option>
	<option value="Ghana">Ghana</option>
	<option value="Togo">Togo</option>
	</select>
	</div>


	<div class ="br">
	<label for="subject">Subject</label>
	<textarea id="subject" input type="text" class = "subject" placeholder="Write something..." style= "height: 200px"></textarea>

	<dive class = "button">
	<button type="button" name="Submit"> Submit </button>
	</div>
	</div>

	</div>
	</div>

	</body>
	</html>