In Progress

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

Skills: PSD to HTML, CSS, HTML, HTML5, Website Design

See more: gulp vs webpack 2019, webpack tutorial, gulp webpack stream, webpack vs browserify, gulp vs webpack reddit, alternative to gulp sass, sass webpack vs gulp, webpack sass, build html page, display rss feed html page, integrate smf html page, database single html page, captcha single html page, single html page website, convert jpeg layout single html page, single html page template, single sale page html, professional single html page, html page single psd, fix my single html page for mobile users

About the Employer:
( 0 reviews ) Yessentuki, Russian Federation

Project ID: #24055131

Awarded to:

amitweb19

Hi, I can do your work at less price as well as less money. Drop me a message for further discussion.

$20 USD in 1 day
(0 Reviews)
0.0
TrungTrinh8

Hello Employer, I am a passionate Computer Engineer Technology student who always excited in programming and solving real world problems. . I have a great experience writing code in Java and C programming language, More

$15 USD in 7 days
(0 Reviews)
0.0

5 freelancers are bidding on average $17 for this job

teamplatform5

Hello, "Greetings" We have gone through your requirements. We can easily do this for you. We have good experience in Website Design, PSD TO HTML, HTML5, etc. The cost is included in the bid proposed, and is negotiabl More

$20 USD in 2 days
(4 Reviews)
1.8
garganshul9200

Hi, Contact me now for the best results. Give me a chance to prove my skills. I am ready and available. I can do this work for you. Please contact me as soon as possible. I have experience of 5 years in the require More

$12 USD in 7 days
(4 Reviews)
1.5
AStream1210

[login to view URL] ! I am full stack developer such as MERN,MEAN,MEVN ,and Laravel && Vue.js, This is my top skill.I can discuss more detail via voice [login to view URL] me.I would be eager to hear from you..I really want your project. More

$20 USD in 7 days
(1 Review)
1.0