The solution must provide the HTML home page styled with a CSS file, and the necessary jQuery to achieve the required results.
The home page is to have a full width header area 110px in height and a full width footer area 12px in height, both with background color: #00467F and font-color: white. A div then must fill the remaining area with the id “main” with a white background. The home page must have the minimum width 924px and minimum height 400px set, including header and footer.
The home page css file needs to link to a full Futura Medium font pack which needs to also be provided – arial example is:
src: url('../font/[url removed, login to view]');
src: url('../font/[url removed, login to view]') format('embedded-opentype'),
url('../font/[url removed, login to view]') format('woff'),
url('../font/[url removed, login to view]') format('truetype'),
The home page will then have between 1 and 9 panels each a minimum of 300px wide by 150px high. The panels will be added on the production system from a database, but for the solution they can be added manually in HTML. The panels should have a white background and a 1px black border with box shadow 5px 5px 5px #808285. The panels should layout optimally so if only 1 then central to the div, if 2 or 3 then side by side, 4 should be 2 x 2, etc upto 9 which should be 3 x 3. The layout can be done in CSS or jQuery.
Each panel should be styled using a CSS class and each should have a unique id. The panels should have an onclick event which causes them to grow smoothly to fill the “main” div and at the same time make an AJAX request to [url removed, login to view] to obtain the new “main” div content.
Hello, Thanks for the detailed description of the project. Interested to proceed with it if provided with a chance. Please drop in a message to discuss. Thanks a lot.