<< >>
Skip Navigation Links.
About.html
Contact.html
Default.html
Site.dwt
Javascript/respond.min.js
Javascript/_vti_cnf/respond.min.js
Readme/default.html
Readme/features.html
Readme/suggestions.html
Readme/_vti_cnf/default.html
Readme/_vti_cnf/features.html
Readme/_vti_cnf/suggestions.html
Style/layout.css
Style/normal.css
Style/sticky.css
Style/_vti_cnf/layout.css
Style/_vti_cnf/normal.css
Style/_vti_cnf/sticky.css
contact.html 
<!DOCTYPE html>
<html dir="ltr">

<!-- #BeginTemplate "site.dwt" -->

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<!-- viewport -->
<meta name="viewport" content="width=device-width">
<meta name="HandheldFriendly" content="True">
<!-- for mobile browsers that don't understand the viewport tag -->
<meta name="MobileOptimized" content="320"/>
<!-- for IE mobile font smoothing -->
<meta http-equiv="cleartype" content="on">
<!-- Needed for iOS devices to ensure correct scaling when switching between portrait and landscape -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- #BeginEditable "doctitle" -->
<title>Your Company Name</title>
<meta content="ADD YOUR DESCRIPTION" name="description" />

<!-- #EndEditable -->


<link href="style/sticky.css" rel="stylesheet" type="text/css">
<link href="style/layout.css" rel="stylesheet" type="text/css">
<link href="style/normal.css" rel="stylesheet" type="text/css">

<!-- Old browsers, including some found on mobile devices, don't support @media queries -->
<script type="text/javascript" src="javascript/respond.min.js"></script>


<!-- Allows IE to style the HTML5 layout elements -->
<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

<!-- #BeginEditable "style" -->
<style>


/*=====================================*/
/* uncomment this when editing in EW */
footer {
	/*margin-top:  0;*/
}
/*=====================================*/


/* mobile-first styles for the form */
label {
	position:  relative;
	display:  block;
}
.txtbox, textarea {
	margin-left:  0;
	margin-top:  5px;
	width:  90%;
	padding:  8px;
	border:  1px solid orange;
	webkit-border-radius:  3px;
	-moz-border-radius:  3px;
	border-radius:  3px;
}
.btn {
	border:  1px solid gray;
	padding:  5px;
}

/* form styles mobile landscape upwards*/
@media only screen and (min-width: 480px)  {
label {
	position:  absolute;
}
.txtbox, textarea {
	margin-left:  100px;
	margin-top:  0;
	width:  250px;
}

#frmContact {
	margin-left:50px;
}

}
</style>
<!-- #EndEditable -->
</head>

<body>

<div id="wrap">

<nav>
<!-- #BeginEditable "nav" -->
		<p><a href="default.html">Home</a><a href="about.html">About Us</a><a 
		href="contact.html">Contact Us</a></p>

	<!-- #EndEditable -->
</nav>

<header>
<h1>Your Company Name</h1>
</header>
<!-- #BeginEditable "body" -->
	<section>
		<h1>Contact Us</h1>
		<p>An example 'contact form' to show how it can be made 'mobile friendly'. 
		Resize this page in the browser to see how the layout changes.</p>
		<!-- you will need to add you own form handling script -->
		<form id="frmContact">
			<p><label for="txtName">Name</label> <input id="txtName" 
			class="txtbox" name="txtName" type="text"></p>
			<p><label for="txtEmail">Email</label> <input id="txtEmail" 
			class="txtbox" name="txtEmail" type="text"></p>
			<p><label for="txtComment">Comment</label> <textarea id="txtComment" 
			name="txtComment" style="height:  150px"></textarea> </p>
			<p><input class="btn" name="Submit1" type="submit" value="Submit"></p>
		</form>
	</section>

<!-- #EndEditable -->
</div>
<footer>
<div id="footerInner">
	<div id="ewCopy" style="text-align:left; float:left"><script type="text/javascript">document.write('© ' +(new Date()).getFullYear() + '  Your name');</script><noscript>© Your name</noscript></div>
</div>
</footer>
<!-- #EndEditable -->

</body>

<!-- #EndTemplate -->

</html>