HTML Design Brief

Project Schedule
Project Start Date Project Duration Immediately 2 weeks (max)

Project Activities
Convert the below website concept images into HTML, CSS, images (and script if required).

Website Concepts
The first concept is the website home page. These images can be supplied in higher resolution if required. There are no PSDs available for these images.

The second concept is the same page, but with a drop-down login dialog displayed. This login dialog needs to be functional in the HTML supplied in so far as the dialog needs to display. It does not need to submit to any server page.

The login dialog should use the following core HTML adjusted to suit the additional login features:
<form name="ctl00" method="post" action="" onsubmit="javascript:return WebForm_OnSubmit();" id="ctl00"> <div> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value=""> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value=""> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value=" "> </div> <script type="text/javascript"> //<![CDATA[ var theForm = document.forms['ctl00']; if (!theForm) { theForm = document.ctl00; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script> <script src="/WebResource.axd" type="text/javascript"></script> <script src="/WebResource.axd " type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function WebForm_OnSubmit() { if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false; return true; } //]]> </script> <div><input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="="></div> <table> <tbody><tr> <td> <p class="lbls"> Username or email:</p> </td> <td> <input name="InlineLoginControl1$UserName" type="text" id="InlineLoginControl1_UserName" onkeypress="javascript:if (event.keyCode == 13) __doPostBack('InlineLoginControl1$Login','')"><span id="InlineLoginControl1_UserNameRequired" style="color: red; visibility: hidden; ">*</span> </td> <td> <p class="lbls"> Password:</p> </td> <td> <input name="InlineLoginControl1$Password" type="password" id="InlineLoginControl1_Password" onkeypress="javascript:if (event.keyCode == 13) __doPostBack('InlineLoginControl1$Login','')"> <span id="InlineLoginControl1_PasswordRequired" style="color: red; visibility: hidden; ">*</span>

</td> <td align="center"> </td> <td align="center"> <a id="InlineLoginControl1_Login" class="lbls" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("InlineLoginControl1$Login", "", true, "", "", false, true))'>Login</a> </td> </tr> <tr> <td colspan="6" align="center" class="lbls"> </td> </tr> </tbody></table> <script type="text/javascript"> //<![CDATA[ var Page_Validators = new Array(document.getElementById("InlineLoginControl1_UserNameRequired"), document.getElementById("InlineLoginControl1_PasswordRequired")); //]]> </script> <script type="text/javascript"> //<![CDATA[ var InlineLoginControl1_UserNameRequired = document.all ? document.all["InlineLoginControl1_UserNameRequired"] : document.getElementById("InlineLoginControl1_UserNameRequired"); InlineLoginControl1_UserNameRequired.controltovalidate = "InlineLoginControl1_UserName"; InlineLoginControl1_UserNameRequired.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid"; InlineLoginControl1_UserNameRequired.initialvalue = ""; var InlineLoginControl1_PasswordRequired = document.all ? document.all["InlineLoginControl1_PasswordRequired"] : document.getElementById("InlineLoginControl1_PasswordRequired"); InlineLoginControl1_PasswordRequired.controltovalidate = "InlineLoginControl1_Password"; InlineLoginControl1_PasswordRequired.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid"; InlineLoginControl1_PasswordRequired.initialvalue = ""; //]]> </script> <script type="text/javascript"> //<![CDATA[ var Page_ValidationActive = false; if (typeof(ValidatorOnLoad) == "function") { ValidatorOnLoad(); } function ValidatorOnSubmit() { if (Page_ValidationActive) { return ValidatorCommonOnSubmit(); } else { return true; } } //]]> </script> </form>

Technical Details
Browser Compatibility
What browsers should this HTML be compatible with?

PC Microsoft Internet Explorer v8, v9 Mozilla Firefox current release Google Chrome current release Mac Safari current release Use of HTML5 and CSS3 is optional but preferred for this project.

Technical Standards