single HTML page(ES6, SASS, GULP WEBPACK)

Summary:

One single page but responsive based on the file on attachments.

Requirements & Instructions:

1. ___ The design for desktop and responsive mobile have been provided for each screen. Please follow it very closely and replicate them as closely as you can.

2. ___ You have the option to use the PSD file (see "PSD File" folder) or also JPG images of each page to replicate the designed pages (see "JPG Files" folder). In the “Resources” folder you will find the profile image.

3. ___ Notice that separate designs for desktop and mobile is provided for each screen.

4. ___ Tablet design is not provided, but it will be the same as desktop except less wide.

5. ___ The desktop design for field editing popup and hover (for edit pen) elements are shown. The pop-up design for other fields (such as website, name, etc) are not provided in design (only the pop-up for the city as an example is shown) but you can use the same concept as shown for those fields in desktop version. Editing in mobile is shown in the design and is completely different as you can see. .

6. ___ Content for the popups should be generated/saved dynamically. Don’t hardcode content on each pop-up for example and make it functional. Replace content live as it is edited/saved in both the view section of the page and the top header (for fields being shown). We recommend to use ES6 for this.

7. ___ The menu (about, settings, option1, etc) for mobile version should operate by swapping to the right or left as you can see in the mobile design. Again, it must be swappable and we should not see a scroll bar when testing it on both different types of browsers! (see design look)

8. ___ The header for the profile page both in desktop and mobile must be a shared component for all pages/tabs so that if you make a change to the header once, it will change the header automatically for all other pages/tabs. Changing through the menu tabs should be dynamic, rendering each tab.

9. ___ For icons (such as plus, star, pen, etc), use: [login to view URL]

10. ___ All fields should follow the Google material design which has the title of the field in the text box by default; once the user input is provided, the title moves above the field and becomes a small overhead title and line becomes blue when focused; see for example: [login to view URL]

--- however, please note that you should not use angular or other “js frameworks”, only ES6 JS (which is the only JS used on our platform along with Jquery). Again, the link to material design is for example purpose only.

11. ___ Must use BEM ([login to view URL]

) to organize CSS

12. ___ Must use SASS for precompiler

13. ___ Must use Gulp for SASS and Webpack for ES6 part. Or just Webpack.

14. ___ Test your pages in the following browsers and version for compatibility: Chrome (older and newest version), Edge (older and newest version), and Safari (older and newest version) to make sure the pages look the same as the design and there are no issues with responsive pages. We will view your results in these 3 browsers and two versions for each (older and newest) on both desktop and mobile sizes.

Technologies to be used :

● For javascript, ONLY implement ES6+ javascript.

● HTML5

● CSS3 and SASS

● Note: Do NOT use Bootstrap; Do NOT use any other javascript technologies other than ES6+ (make sure not to use Jquery, Angular, Vue, React, or any other JS frameworks/Lib).

DEADLINE : 2 Hours

PSD do HTML CSS HTML HTML5 Projektowanie stron www

Numer ID Projektu: #24055131

O projekcie