Create responsives XHTML pages from XD Part 2
Budget: $750 – $1,500 USD
For the new version of an existing application, we have 4 XD projects with different scenarios with desktop and mobile version that need to be transformed into XHTML. Here are some details:
- we want responsive pages
- no javascript except if it comes from bootstrap
- please note that the top bar is almost always the same, it must be the same XHTML code
- there is a breadcrumb trail that changes color as you progress
Desktop version :
The 1st project (https://xd.adobe.com/view/0752d76f-10d8-4d5c-84d8-4fd62bc8035a-5201/) and 2nd project (https://xd.adobe.com/view/62b35ea5-5d2f-442b-b1c4-d30da929ee4f-37e0/) are almost the same except for the beginning.
The 1st is an account creation.
The 2nd is when the user already has an account.
for the 1st XD project :
- page 1 ignore this
- page 2 account creation
for the 2nd XD project :
- page 1 ignore this
1st project and 2nd project :
- (1st project after account creation) page 16 is when there are no items selected and (2nd project after login) page 11 there are items already
- (1st project) page 18 and (2nd project) page 16 are the same. Open version of (1st project) page 16 and (2nd project) page 11 when you click on "Choisir une nouvelle qualification"
- (1st project) page 3 and (2nd project) page 2 are the same
- (1st project) page 9 and (2nd project) page 8 are the same, when you click on "Déclarer un déménagement", there must be a tab
- (1st project) page 4 is when there are no items select and (2nd project) page 3 there are already items
- (1st project) page 10 and (2nd project) page 9 are the same. Open version of (1st project) page 4 and (2nd project) page 3 when you click on "Saisir un nouvel exercice comptable"
- (1st project) page 5 is when there are no items select and (2nd project) page 4 there are already items
- (1st project) page 11 and (2nd project) page 14 are the same. Open version of (1st project) page 5 and (2nd project) page 4 when you click on "Nouveau référent"
- (1st project) page 6 and (2nd project) page 5 are the same. The white bar in the middle top "Vos références d'installation" must be interactive. You should be able to move the images with the left/right arrows
- (1st project) page 13 and (2nd project) page 12 are the same. Open version of (1st project) page 6 and (2nd project) page 5 when you click on "Ajouter une référence"
- (1st project) page 14 and (2nd project) page 13 are the same
- (1st project) page 15 and (2nd project) page 15 are the same. Open version of (1st project) page 14 and (2nd project) page 13 when you want to select an item
- (1st project) page 17 and (2nd project) page 17 ignore this
- (1st project) page 7 and (2nd project) page 6 are the same
- (1st project) page 12 and (2nd project) page 10 are the same. Same as (1st project) page 7 and (2nd project) page 6 just the color that changes when you select a payment
- (1st project) page 8 and (2nd project) page 7 are the same
Mobile version :
The 3rd project (https://xd.adobe.com/view/60219bf0-8f90-463b-8a88-54e9cff192b1-3572/) and 4th project (https://xd.adobe.com/view/86f674dd-7add-4c02-96bc-016e03391d4d-d3a5/) are almost the same except for the beginning.
The 3rd is an account creation.
The 4th is when the user already has an account.
for the 3rd XD project :
- page 1 and 2 ignore this
- page 3 account creation is the mobile version of page 2 of the 1st project
- page 4 when you click on the bulb it opens a slide on the left
for the 4th XD project :
- page 1 and 2 ignore this
3rd project and 4th project :
- (3rd project) page 16 and (4th project) page 16 are the mobile version of (1st project) page 16 and (2nd project) page 11
- (3rd project) page 18. Open version of (3rd project) page 16 when you click on "Choisir une nouvelle qualification". And mobile version of (1st project) page 18
- (3rd project) page 5 and (4th project) page 3 are the mobile version of (1st project) page 3 and (2nd project) page 2
- (3rd project) page 6 and (4th project) page 4 are the mobile version of (1st project) page 9 and (2nd project) page 8
- (3rd project) page 7 and (4th project) page 5 are the mobile version of (1st project) page 4 and (2nd project) page 3
- (3rd project) page 8 and (4th project) page 6 are the mobile version of (1st project) page 10 and (2nd project) page 9
- (3rd project) page 9 and (4th project) page 7 are the mobile version of (1st project) page 5 and (2nd project) page 4
- (3rd project) page 10 and (4th project) page 8 are the mobile version of (1st project) page 11 and (2nd project) page 14
- (3rd project) page 11 and (4th project) page 9 are the mobile version of (1st project) page 6 and (2nd project) page 5
- (3rd project) page 12 and (4th project) page 10 are the mobile version of (1st project) page 13 and (2nd project) page 12
- (3rd project) page 17 and (4th project) page 14 are the mobile version of (1st project) page 14 and (2nd project) page 13
- (3rd project) page 19 and (4th project) page 15 are the mobile version of (1st project) page 15 and (2nd project) page 15
- (3rd project) page 20 and (4th project) page 17 ignore this
- (3rd project) page 13 and (4th project) page 11 are the mobile version of (1st project) page 7 and (2nd project) page 6
- (3rd project) page 14 and (4th project) page 12 are the mobile version of (1st project) page 12 and (2nd project) page 10
- (3rd project) page 15 and (4th project) page 13 are the mobile version of (1st project) page 8 and (2nd project) page 7
Resume :
Page 1 account.html. Contains (1st project) page 2 and (3rd project) page 3/4 mobile version
Page 2 step1.html. Contains (1st project) page 16/18, (2nd project) page 11/16, (3rd project) page 16/18 mobile version and (4th project) page 16 mobile version
Page 3 step2.html. Contains (1st project) page 3/9, (2nd project) page 2/8, (3rd project) page 5/6 mobile version and (4th project) page 3/4 mobile version
Page 4 step3.html. Contains (1st project) page 4/10, (2nd project) page 3/9, (3rd project) page 7/8 mobile version and (4th project) page 5/6 mobile version
Page 5 step4.html. Contains (1st project) page 5/11, (2nd project) page 4/14, (3rd project) page 9/10 mobile version and (4th project) page 7/8 mobile version
Page 6 step5.html. Contains (1st project) page 6/13, (2nd project) page 5/12, (3rd project) page 11/12 mobile version and (4th project) page 9/10 mobile version
Page 7 step6.html. Contains (1st project) page 14/15, (2nd project) page 13/15, (3rd project) page 17/19 mobile version and (4th project) page 14/15 mobile version
Page 8 step7.html. Contains (1st project) page 7/12, (2nd project) page 6/10, (3rd project) page 13/14 mobile version and (4th project) page 11/12 mobile version
Page 9 step8.html. Contains (1st project) page 8, (2nd project) page 7, (3rd project) page 15 mobile version and (4th project) page 13 mobile version
- we want responsive pages
- no javascript except if it comes from bootstrap
- please note that the top bar is almost always the same, it must be the same XHTML code
- there is a breadcrumb trail that changes color as you progress
Desktop version :
The 1st project (https://xd.adobe.com/view/0752d76f-10d8-4d5c-84d8-4fd62bc8035a-5201/) and 2nd project (https://xd.adobe.com/view/62b35ea5-5d2f-442b-b1c4-d30da929ee4f-37e0/) are almost the same except for the beginning.
The 1st is an account creation.
The 2nd is when the user already has an account.
for the 1st XD project :
- page 1 ignore this
- page 2 account creation
for the 2nd XD project :
- page 1 ignore this
1st project and 2nd project :
- (1st project after account creation) page 16 is when there are no items selected and (2nd project after login) page 11 there are items already
- (1st project) page 18 and (2nd project) page 16 are the same. Open version of (1st project) page 16 and (2nd project) page 11 when you click on "Choisir une nouvelle qualification"
- (1st project) page 3 and (2nd project) page 2 are the same
- (1st project) page 9 and (2nd project) page 8 are the same, when you click on "Déclarer un déménagement", there must be a tab
- (1st project) page 4 is when there are no items select and (2nd project) page 3 there are already items
- (1st project) page 10 and (2nd project) page 9 are the same. Open version of (1st project) page 4 and (2nd project) page 3 when you click on "Saisir un nouvel exercice comptable"
- (1st project) page 5 is when there are no items select and (2nd project) page 4 there are already items
- (1st project) page 11 and (2nd project) page 14 are the same. Open version of (1st project) page 5 and (2nd project) page 4 when you click on "Nouveau référent"
- (1st project) page 6 and (2nd project) page 5 are the same. The white bar in the middle top "Vos références d'installation" must be interactive. You should be able to move the images with the left/right arrows
- (1st project) page 13 and (2nd project) page 12 are the same. Open version of (1st project) page 6 and (2nd project) page 5 when you click on "Ajouter une référence"
- (1st project) page 14 and (2nd project) page 13 are the same
- (1st project) page 15 and (2nd project) page 15 are the same. Open version of (1st project) page 14 and (2nd project) page 13 when you want to select an item
- (1st project) page 17 and (2nd project) page 17 ignore this
- (1st project) page 7 and (2nd project) page 6 are the same
- (1st project) page 12 and (2nd project) page 10 are the same. Same as (1st project) page 7 and (2nd project) page 6 just the color that changes when you select a payment
- (1st project) page 8 and (2nd project) page 7 are the same
Mobile version :
The 3rd project (https://xd.adobe.com/view/60219bf0-8f90-463b-8a88-54e9cff192b1-3572/) and 4th project (https://xd.adobe.com/view/86f674dd-7add-4c02-96bc-016e03391d4d-d3a5/) are almost the same except for the beginning.
The 3rd is an account creation.
The 4th is when the user already has an account.
for the 3rd XD project :
- page 1 and 2 ignore this
- page 3 account creation is the mobile version of page 2 of the 1st project
- page 4 when you click on the bulb it opens a slide on the left
for the 4th XD project :
- page 1 and 2 ignore this
3rd project and 4th project :
- (3rd project) page 16 and (4th project) page 16 are the mobile version of (1st project) page 16 and (2nd project) page 11
- (3rd project) page 18. Open version of (3rd project) page 16 when you click on "Choisir une nouvelle qualification". And mobile version of (1st project) page 18
- (3rd project) page 5 and (4th project) page 3 are the mobile version of (1st project) page 3 and (2nd project) page 2
- (3rd project) page 6 and (4th project) page 4 are the mobile version of (1st project) page 9 and (2nd project) page 8
- (3rd project) page 7 and (4th project) page 5 are the mobile version of (1st project) page 4 and (2nd project) page 3
- (3rd project) page 8 and (4th project) page 6 are the mobile version of (1st project) page 10 and (2nd project) page 9
- (3rd project) page 9 and (4th project) page 7 are the mobile version of (1st project) page 5 and (2nd project) page 4
- (3rd project) page 10 and (4th project) page 8 are the mobile version of (1st project) page 11 and (2nd project) page 14
- (3rd project) page 11 and (4th project) page 9 are the mobile version of (1st project) page 6 and (2nd project) page 5
- (3rd project) page 12 and (4th project) page 10 are the mobile version of (1st project) page 13 and (2nd project) page 12
- (3rd project) page 17 and (4th project) page 14 are the mobile version of (1st project) page 14 and (2nd project) page 13
- (3rd project) page 19 and (4th project) page 15 are the mobile version of (1st project) page 15 and (2nd project) page 15
- (3rd project) page 20 and (4th project) page 17 ignore this
- (3rd project) page 13 and (4th project) page 11 are the mobile version of (1st project) page 7 and (2nd project) page 6
- (3rd project) page 14 and (4th project) page 12 are the mobile version of (1st project) page 12 and (2nd project) page 10
- (3rd project) page 15 and (4th project) page 13 are the mobile version of (1st project) page 8 and (2nd project) page 7
Resume :
Page 1 account.html. Contains (1st project) page 2 and (3rd project) page 3/4 mobile version
Page 2 step1.html. Contains (1st project) page 16/18, (2nd project) page 11/16, (3rd project) page 16/18 mobile version and (4th project) page 16 mobile version
Page 3 step2.html. Contains (1st project) page 3/9, (2nd project) page 2/8, (3rd project) page 5/6 mobile version and (4th project) page 3/4 mobile version
Page 4 step3.html. Contains (1st project) page 4/10, (2nd project) page 3/9, (3rd project) page 7/8 mobile version and (4th project) page 5/6 mobile version
Page 5 step4.html. Contains (1st project) page 5/11, (2nd project) page 4/14, (3rd project) page 9/10 mobile version and (4th project) page 7/8 mobile version
Page 6 step5.html. Contains (1st project) page 6/13, (2nd project) page 5/12, (3rd project) page 11/12 mobile version and (4th project) page 9/10 mobile version
Page 7 step6.html. Contains (1st project) page 14/15, (2nd project) page 13/15, (3rd project) page 17/19 mobile version and (4th project) page 14/15 mobile version
Page 8 step7.html. Contains (1st project) page 7/12, (2nd project) page 6/10, (3rd project) page 13/14 mobile version and (4th project) page 11/12 mobile version
Page 9 step8.html. Contains (1st project) page 8, (2nd project) page 7, (3rd project) page 15 mobile version and (4th project) page 13 mobile version