Let’s get the Terms & Conditions and Requirements done first :)
BEFORE PROCEEDING, YOU UNDERSTAND AND AGREE THAT THE WEBSITE IPRO.DIGITAL AND IT’S CONTENTS AND ALL MATTERS AND IDEAS DISCUSSED IN AND PURSUANT TO THIS POSTING ARE COPYRIGHT AND THAT YOU SHALL NOT DISCLOSE ANY OF THEM AND/ OR COMPETE WITH US AND/ OR APPROACH CLIENTS ON OUR WEBSITE AND THAT YOU AGREE TO BE HELD LIABLE FOR ALL COSTS AND LOSSES AND POTENTIAL LOSSES IF YOU DO OTHERWISE.
BASICALLY, NO COPYING, DISCLOSING OR COMPETING WITH US.
We are finishing up our website at http://ipro.digital . It is responsive and must appear and work the same way on Chrome, Firefox, Opera, Safari & IE going back to 2012 (IE 10) and/ or earlier. The same is required from your work below. Code has been given below for almost everything so this is an easy job. I can ONLY pay via Upwork (as per rules). I can be available on Skype/ WhatsApp if needed.
I did and taught web design for years – am only here to save time. PLEASE BEGIN YOUR APPLICATION WITH THE NUMBER OF MINUTES PER STAGE and TOTAL TIME. We need to begin by today.
We will launch a large extension of our system at end of August, so if your rates are reasonable and you are easy to work with (high quality and minimal communication) we expect to contract out several months of follow-up work (likely years).
REQUIRED METHODS FOR THIS JOB
(1) Code is to be left in the order it is in now (e.g. no changing order of CSS, JS, jQuery functions).
(2) You can CREATE new classes or ADD to classes but NOT DELETE classes (unless absolutely necessary). Please add empty HTML comments (<!---->) before and after each change you make.
(3) Please follow from the provided code and only change things which are discussed in writing in advance.
(4) Prefer pure CSS to JQuery where possible.
(a) At http://ipro.digital there is a banner which works perfectly and responsively in Firefox, Chrome and Opera, and probably Safari. On IE, the image overflows. Need an IE fix to make pages appear the same from IE10 and up (or earlier than IE10 if it can be done without extra time). (15 min)
(b) Make previous and next buttons on banner work (add CSS checked state or jQuery).
(c) Add swipe/ drag left and right for mobile phone banner swipe.
(d) Some pages will have an image where the banner is. It should look exactly the same with the H1 text, text line and button still there, with the only difference that there only one image (no fading etc) and no previous/ next button. Need to make a sample page. You can simply copy the class and change it a bit. Call this page index2.html.
(e) Once the sample image page is made, copy index2.html to index3.html and do not change the H1 EXCEPT the HTML content so it appears like in http://ipro.digital/x/ fadeText.html (just copy the code from here).
(2) Other minor fixes:
(e) The form in http://ipro.digital/contact/ should appear exactly as in http://ipro.digital/index1.html. Needs fix.
(f) At http://ipro.digital/results/ the content section contains a <ul> which needs to look like bullet list. Please create class. Please also create <ol> class for use on other pages in content section. (This does not apply to nav menus).
Please note: The banner grayscale and effects and keyframes etc should not be changed as we are adding further effects.
We want to finish the above first. After that is complete, we want to improve the banner:
(g) Add grayscale and glow:
(i) after 2 seconds the banner images should become 100% grayscale (black & white) (0 - 2 seconds on timeline), taking one second to change colour (2 - 3 seconds on timeline), then stay black & white for 4 seconds (3 to 7 seconds on timeline)
(ii) the H1 text, strapline and button should glow sharply for 2 seconds (2 - 4 seconds on timeline), and then keep the full glow for 3 seconds (4 - 7 seconds on timeline)
(iii) image 2 appears with it's text and does the same as above (7 - 14 seconds on timeline), and image 3 appears with it's text and does the same as above (14-21 seconds on timeline), then it transitions back to image 1 and repeats.
Sample grayscale code at http://ipro.digital/x/grayscale.html. The glow code is at http://ipro.digital/x/glow1.html, if we agree the text to move to screen centre, then http://ipro.digital/x/glow2.html shows the glow moving position.