Web page designing
$30-40 USD
Paid on delivery
For this project 11 HTML pages is needed. Pages are made for the ruby on rails web application. The main design is already decided and made, so now other 11 pages should be made with similar design.
There are only 6 HTML pages that are unique, other 5 pages are almost the same as those in the first 6 group (for example, login page and a page for changing user email and password are very simmilar)
Because of that - the project goes like this:
-first we make 6 unique pages (marked with * on the list below)
-after first 6 pages are made and approved, then we make 5 easier pages
For every page - all what is needed is content area. Header and footer of every page is already made (with main design) and is not needed.
On this link you can have current page design in a zip file
[url removed, login to view]
Please take these files. All you have to edit is from line 31 in the file ( comment <!---Here starts content area--> ) and you edit until line 225 (comment <!---Here ends content area--> ). In fact - for editing - you just delete everything that is between that and write you own code.
**
**
**Testing of the design:**
Part of YOUR yob is to test pages on all browsers: internet explorer 7, 8, 9, google chrome, firefox. I will test the pages myself - but if there are a lot of errors in different browsers the work will be returned to you for testing and error searching.
**Billing / paying to you:**
50% after first 6 pages are finished and confirmed, 50% after all the work is done.
Here is the whole project description in one document:
[url removed, login to view]
## Deliverables
**Making the boxes outlined with thin blue line resizable**
As you will see down written in page specifications - many elements will need to be outlined with a thin blue line (ie. on a login page - email and password input fields are inside a "box").
What is also needed - to make this box resizabe. Why? Because in the future something might change and maybe more text description for some element is needed. If this text is added inside the "box" - this box should resize accordingly - and not break the whole design.
Resizing or streching of the box should be horizontally and vertically.
************************
**Detailed information about the pages:**
***About lansiraj - link:** [**[url removed, login to view]**][1]
This is a simple "about" page. It has a header text and I'd like it to have text divided in tree columns (like on the site [url removed, login to view] at the top).
So as you can see - every one of these 3 columns has to have his own header and text + a small image as indicated on this screenshot
[url removed, login to view]
Also, these text blocks have to have fixed width and height and if there are more than 3 text blocks, then another row is formed. Basically, new text is shown below the first 3 text blocks.
***Login page -** [**[url removed, login to view]**][2]
These are the elements on the page:
-back to the main page link
-application notices on the top (used for notices like, wrong username/password)
-header text
-a box with email and password fields. Please make it so that this box is surrounded with thin blue line (just like company elements on the main page).
-forgotten password link
**Forgotten password page -** [**[url removed, login to view]**][3]
Almost the same as the login page - it only has one email field in the the "box" surrounded with thin blue line
***Show company page -** [**[url removed, login to view]**][4]
This page shows all the information about a single company. These are the elements for this page: (you can see it on this image too:
[url removed, login to view] )
1. Company title
2. Company hometown and budget
3. Company description
4. Company logo (maximum size 200 x 100px)
5. facebook like button (please move it more on the left so it is near company title, hometown and budget)
6. Contact us information (can you please put contact us information in a box like this [url removed, login to view] - just choose colors that are similar to the rest of the site design)
7. below are images + images descriptions - (There can be up to 6 images + image descriptions. Only what is important here is that images are centered, and text is readable)
***Add your company page - part 1 -** [**[url removed, login to view]**][5]
This is a page where a user inputs the information about his company. The data is divided in thee parts:
1. Insert the image and description of the reference
2. Insert the information about your company (name, town, budget)
3. Insert contact information about the company (homepage, phone, email)
(you can also see it here on the link: [url removed, login to view] )
These parts should be divided and every part has to be in a separate box outlined with a thin blue line just like company on the main page. Inside the box - there should be elements:
- box header text
(now for every input element):
-description of the input element (this is also bigger/bold text)
-more detailed description of what to enter - this text should be slightly smaller
-input element (submit button, form input?)
Similar thing to this page can be seen here: [url removed, login to view] - we are trying to accomplish similar thing.
**Add your company page - part 2 - (no direct link)**
This is almost simillar to the login page design - it only has additional password field for confirmation.
Here is screen shot link: [url removed, login to view]
***Account - main menu**
(to see this page you have to login here: [url removed, login to view] (username: info@[url removed, login to view], password: test1234)
link: <[url removed, login to view]>
This is the main menu when the user logs into his account. Here are the elements for the design:
1. application notices - (should be the same as the notices for the login page)
2. back to the application main menu
3. text header for this page
4. You are logged as user@[url removed, login to view] sign.
5. User menu items (this should be made as a list - but slightly bigger letters because this is important for the user)
6. Additional information for the user - this should be centered on the left half of the screen
7. big company appearance - so that the user can see how his company looks. This is ok and does NOT have to be changed.
You can see current elements arrangement here [url removed, login to view]
This arrangement is generally ok, but changes to the letters and letter size should be made.
**Account - edit company**
(to see this page you have to login here: [url removed, login to view] (username: info@[url removed, login to view], password: test1234)
link: <[url removed, login to view]>
This page is very similar to the Add your company page - part 1. Here are almost the same information (but without data about reference) So now we need only two boxes outlined with thin blue line. Every thing else is almost the same as for the add your company page. Inside the boxes for every data input should be elements: box header text, description, more detailed description and input element.
***Account - edit reference screen**
(to see this page you have to login here: [url removed, login to view] (username: info@[url removed, login to view], password: test1234)
link: <[url removed, login to view]>
This screen does not need much change from what it is now (see here: [url removed, login to view] )
On this page there can be maximum of 6 references. Their arrangement is currently good (2 lines with 3 elements in each). Every reference should be outline with thin blue line.
Other elements on the page are:
-text header
-back to the main menu link
-application notices on top
**Account - change user data**
(to see this page you have to login here: [url removed, login to view] (username: info@[url removed, login to view], password: test1234)
<[url removed, login to view]>
Should be almost the same as the login page - it just has 2 password fiels for confirmation.
Below it is also a link for deleting the whole account. This link should be slightly bigger and colored red.
**Accound - delete account page**
(to see this page you have to login here: [url removed, login to view] (username: info@[url removed, login to view], password: test1234)
link: <[url removed, login to view]>
This page has some text about the current account and a password confirmation input box.
Other elements are:
-text header
-back to main menu link
-application notice on top
****************************
Project ID: #3343866
About the project
Awarded to:
9 freelancers are bidding on average $30 for this job
