Account Selection Web Page

The scope of this project is to create the UI of a web page that we can add to our framework. The web page should be designed in ASP.NET, C# codebehind. This is not an MVC project and MVC should not be used. (1) Create a single .aspx .NET web page (2) The form will be separated into four sections (4) The web page must be mobile friendly and must use @media in the css to scale on all devices The sections that will be defined on the web page are listed below. Also, you can find the same information on the attached pdf with a sample layout of the web page. Account Type ------------------ A sample image is provided below. The image should behave similar to the one seen below When the user navigates over any of the sections (e.g. web sites), the icon will glow. When the user clicks on any section, then the color will change to what is defined in the css. A drop arrow will also display at the bottom. The text in each of the account sections should be: Business, Developer, Designer, Translator, Marketing. The default section selected in Account Type is “Business” (change the text “web sites”, “virtual machines”, “mobile services”, “cloud services” to “Business”, “Developer”, “Designer”, “Translator”). Clicking on “Business” will enable ALL sections in App Framework. Clicking on “Developer” will enable: “Cloud Designer”, “Commerce”, “Commerce Plus”, “Cloud DB”, “Mobile Apps” Clicking on “Designer” will enable: “Cloud Designer”, “Mobile Apps” Clicking on “Translator” will enable: “Translation” Clicking on Marketing will enable: “Cloud Designer”, “Campaign” *For all other sections that ARE NOT enabled, then the section will be greyed out. Clicking on the disabled section will not do anything. App Framework -------------------- When the user selects one of the sections in the Account Type, it will enable certain sections below in App Framework. The additional sections below will also look like that in the Account Type section. There will be a total of seven (7) additional sections below: “Cloud Designer”, “Commerce”, “Commerce Plus”, “Translation”, “Cloud DB”, “Campaign”, “Mobile Apps.” Clicking on any of the sections that are enabled will expand and show hidden content. That is, once a section in Account Type is clicked, then a section in App Framework is enabled; once the appropriate sections in App Framework are enabled, the user can then click on that section in App Framework and the form will expand. Discount ----------- Add this section but leave empty. This section will render a discount key for the user [login to view URL] Keys --------------------- Two input, type text fields. Labels on the fields should read Public Key, Private Key A button to save the key values. Account Information ------------------------- Input fields for user to enter certain information Input button to save the information that was entered