Convert a website design into HTML/CSS
We need 5 page designs converted into a responsive-design website pages.
Here is the list with detailed description:
1. Home page: [login to view URL] - the following requirements are common to all pages:
- All the buttons on the page should change appearance onmouseover and onclick - possibly using a subtle animation
- The social media icons at the top and at the bottom should change colours onmouseover
- All links should also change for the following states: [login to view URL]
- “Integreety Ltd.” should be a link to [login to view URL]
- There needs to be the EU COOKIE info at the bottom of the screen with a cross close button - displayed as long as the user doesn’t close it. The positioning should be always at the bottom of the screen (not the page). IF the user scrolls down to the bottom of the page, the info should be displayed below the social media icons.
- The menu items should be links to internal pages and should not change appearance for the a:visited state. But the green bar under the selected menu item should follow the mouse cursor if the user hovers over the menu items. On user moving the cursor away from the menu icons, the green bar should return to the initial location. The location will be different depending on the selected page - some pages may not have the bar initially, but hovering should still bring it on. This should be achieved using an animation.
2. Table page: [login to view URL]
- This page will be reused many times throughout the website - a number of background images has been prepared - they should be easily replaceable
- The page title “My Homework” needs to be text
- The green bar underneath should not be part of the background image
- The table is generated using jQuery Datatables. Here is the current version: [login to view URL]
- The table needs to be responsive as well, as per: [login to view URL] - if possible, the circle with the plus that reveals hidden columns should only appear if there are hidden columns
- The table navigational button should also change appearance onmouseover and onclick
3. Support page: [login to view URL]
- Very similar to the home page, so not much work here
4. Registration page: [login to view URL]
5. Google Forum page: [login to view URL]
- This page is about styling the Google Forum as closely as possible to the design
- The current version: [login to view URL]
The Google Groups forum has a plethora of config options. We are not sure whether it is possible to style it at all or to what extent. It needs to be confirmed that this achievable.
The work needs to include implementing a popup as per this design:
[login to view URL]
I'd like this website to work well on a mobile - on the lowest resolution the images should not be displayed.
The delivered HTML/CSS code should be well structured and optimised. The CSS classes should not be applied on the tag level, except where agreed.
A PSD version with all images and fonts will be provided.
Thanks for your entries.